{"id":5652,"date":"2017-07-19T12:53:21","date_gmt":"2017-07-19T10:53:21","guid":{"rendered":"http:\/\/wppa.nl\/?page_id=5652"},"modified":"2021-09-04T11:04:50","modified_gmt":"2021-09-04T09:04:50","slug":"regular-search-with-extended-features","status":"publish","type":"page","link":"https:\/\/wppa.nl\/fr\/docs-by-subject\/search\/regular-search-with-extended-features\/","title":{"rendered":"Regular search with extended features"},"content":{"rendered":"<p>The regular search photos has a few extensions.<\/p>\n<p>- You can add a category slectionbox. When included, the search dialog shows a selectionbox with all album categories that exist in the system. When a visitor selects a category, only photos will be found that reside in albums with the selected category. If album search is also active, only albums with the selected category are found.<\/p>\n<p>- You can add up to 3 selectionboxes with a set of pre-defind search tokens. This makes it easy for the visitor to make a selection based on one or more pre-defined existing choices.<br \/>\nAn example:<\/p>\n<p>The next search box makes it simple to select a flower, a cat or a bird that matches one of the colors in the list.<br \/>\nNote that the selected words act exactly like normal search tokens. If you want a bird that is red as well as white, you can select one of the wanted colors in de listbox and enter the other wanted color in the reguar search box.<br \/>\n \n<!-- Start container 1 --><div id=\"wppa-modal-container-1\" class=\"wppa-modal-container\" style=\"position:relative;z-index:100000;\" data-wppa=\"yes\"><\/div><div id=\"wppa-container-wrapper-1\" class=\"alignnone wppa-container-wrapper \" style=\"width:100%;clear:both;padding:0;position:relative;\"><div id=\"wppa-container-1\" style=\"width:100%;\" class=\"wppa-container wppa-container-1 wppa-rev-9110011 wppa-prevrev-9110007 wppa-theme-9.1.10.011 wppa-api-9.1.10.011\"><svg id=\"wppa-ajax-spin-1\" class=\"wppa-ajax-spin uil-default\" width=\"120px\" height=\"120px\" viewBox=\"0 0 135 135\" preserveAspectRatio=\"xMidYMid\" stroke=\"\" style=\"width:120px; height:120px; position:fixed; top:50%; margin-top:-60px; left:50%; margin-left:-60px; opacity:1; display:none; fill:#404040; background-color:transparent; border-radius:12px;\"><path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"-360 67 67\" dur=\"2.5s\" repeatCount=\"indefinite\" ><\/path><path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"360 67 67\" dur=\"8s\" repeatCount=\"indefinite\" ><\/path><\/svg><input type=\"hidden\" id=\"wppa-nonce-0-1\" name=\"wppa-nonce\" value=\"625286c05f\" ><div id=\"wppa-search-1\" class=\"wppa-box wppa-search\"><div id=\"wppa_searchform_1\" class=\"widget_search search-form\"><div class=\"wppa-searchsel-item wppa-searchsel-item-1\" style=\"width:25%;float:left\">Cat\u00e9gorie <select id=\"wppa-catbox-1\" name=\"wppa-catbox\" class=\"wppa-searchselbox\" style=\"width:100%;clear:both;\"><option value=\"\">--- tout ---<\/option><option value=\"Art\">Art<\/option><option value=\"Demo\">Demo<\/option><\/select><\/div><div class=\"wppa-searchsel-item wppa-searchsel-item-1\" style=\"width:25%;float:left\">Item type&nbsp; <select id=\"wppa-searchselbox-0-1\" name=\"wppa-searchselbox-0\" class=\"wppa-searchselbox\" style=\"clear:both;width:100%;\"><option value=\"\" selected ><\/option><option value=\"Bird\">Bird<\/option><option value=\"Cat\">Cat<\/option><option value=\"Flower\">Flower<\/option><\/select><\/div><div class=\"wppa-searchsel-item wppa-searchsel-item-1\" style=\"width:25%;float:left\">Color&nbsp; <select id=\"wppa-searchselbox-1-1\" name=\"wppa-searchselbox-1\" class=\"wppa-searchselbox\" style=\"clear:both;width:100%;\"><option value=\"\" selected ><\/option><option value=\"Blue\">Blue<\/option><option value=\"Green\">Green<\/option><option value=\"Purple\">Purple<\/option><option value=\"Red\">Red<\/option><option value=\"White\">White<\/option><option value=\"Yellow\">Yellow<\/option><option value=\"Blue green\">Blue green<\/option><\/select><\/div><div class=\"wppa-searchsel-item wppa-searchsel-item-1\" style=\"width:25%;float:left;margin-top:6px;\">&nbsp; <div style=\"position:relative\"><label><span class=\"screen-reader-text\">Rechercher:<\/span><input id=\"wppa-searchstring-1\" type=\"search\" class=\"search-field\" placeholder=\"Recherche des photos&hellip;\" value=\"\" name=\"wppa-searchstring\" style=\"position: relative;top: -14px;\" ><\/label><img decoding=\"async\" src=\"https:\/\/wppa.nl\/wp-content\/uploads\/wppa\/icons\/magnifier-large.png\" class=\"search-submit\" style=\"margin-left:6px;\" onclick=\"wppaDelayedSearch('https:\/\/wppa.nl\/fr\/docs-by-subject\/search\/regular-search-with-extended-features\/', 1, 2 )\" ><\/div><\/div><div style=\"clear:both\"><\/div><input id=\"wppa-searchroot-1\" type=\"hidden\" name=\"wppa-searchroot\" class=\"wppa-search-root-id\" value=\"\" ><\/div><div class=\"wppa-clear\"><\/div><\/div><div style=\"clear:both;\"><\/div><div id=\"wppa-container-1-end\"><\/div><\/div><\/div>\n<!-- End [wppa type=\"search\" landing=\"5652\"] \/fr\/wp-json\/wp\/v2\/pages\/5652 oc 1 0 queries in 1.0 ms. at 23:33. Max mem: 62.50 Mb. --> \n<!-- Start container 2 --><div id=\"wppa-modal-container-2\" class=\"wppa-modal-container\" style=\"position:relative;z-index:100000;\" data-wppa=\"yes\"><\/div><div id=\"wppa-container-wrapper-2\" class=\"alignnone wppa-container-wrapper \" style=\"width:100%;clear:both;padding:0;position:relative;\"><div id=\"wppa-container-2\" style=\"width:100%;\" class=\"wppa-container wppa-container-2 wppa-rev-9110011 wppa-prevrev-9110007 wppa-theme-9.1.10.011 wppa-api-9.1.10.011\"><svg id=\"wppa-ajax-spin-2\" class=\"wppa-ajax-spin uil-default\" width=\"120px\" height=\"120px\" viewBox=\"0 0 135 135\" preserveAspectRatio=\"xMidYMid\" stroke=\"\" style=\"width:120px; height:120px; position:fixed; top:50%; margin-top:-60px; left:50%; margin-left:-60px; opacity:1; display:none; fill:#404040; background-color:transparent; border-radius:12px;\"><path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"-360 67 67\" dur=\"2.5s\" repeatCount=\"indefinite\" ><\/path><path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"360 67 67\" dur=\"8s\" repeatCount=\"indefinite\" ><\/path><\/svg><input type=\"hidden\" id=\"wppa-nonce-0-2\" name=\"wppa-nonce\" value=\"625286c05f\" ><div style=\"clear:both;\"><\/div><div id=\"wppa-container-2-end\"><\/div><\/div><\/div><\/p>\n<p>You will see that, when a result is found, the selecionbox re-appears above the results. To do this, make sure the landing page is set to the current page, either global to the system in <strong>Basic settings -> Search -> I -> Item 1: Search landing page<\/strong>, or as shortcode attribute:<br \/>\n<code>[<b><\/b>wppa type=\"search\" landing=\"5652\"]<\/code><\/p>\n<p>Because you want the landing page as the second wppa shortcode on the page (i.e. below the searchbar shortcode), you will have to set the landing occurrance to two, also in <strong>Basic settings -> Search -> I -> Item 1: Search landing page<\/strong>, or, in this particular case on this very documentation page with an inline  setting:<br \/>\n<code>[<b><\/b>wppa_set name=\"wppa_search_oc\" value=\"2\"]<\/code> <em>before<\/em> the actual searchbox shortcode.<br \/>\nFor more information on inline settings see <a href=\"http:\/\/wppa.nl\/docs-by-subject\/in-line-settings\/\" target=\"_blank\" rel=\"noopener\">this ducumentation page<\/a><\/p>\n<p>The configuration of the search-selection boxes is in <strong>Basic settings -> Search -> I<\/strong><br \/>\n <div id=\"wppa-container-wrapper-3\" class=\"alignnone wppa-container-wrapper \" style=\"width:100%;clear:both;padding:0;position:relative;\"><div id=\"wppa-container-3\" style=\"width:100%;\" class=\"wppa-container wp-caption\"><div style=\"font-size:0;line-height:0\"><img id=\"ph-4736-3\" title=\"Search-selboxes\" style=\"width:100%;margin:0;padding:0;border:none;\" alt=\"4736\" class=\"size-medium wppa-mphoto\" onload=\"wppaLazyLoaded++;wppaMakeLazyVisible(&#039;onload&#039;);\" onerror=\"wppaLazyLoaded++;\" decoding=\"async\" data-src=\"https:\/\/wppa.nl\/wp-content\/uploads\/wppa\/4736.png?ver=689\" data-stack=\"picture:296:functions:4223\"><\/div><div class=\"wp-caption-text\">The configuration of the search selection boxes <\/div><svg id=\"wppa-ajax-spin-3\" class=\"wppa-ajax-spin uil-default\" width=\"120px\" height=\"120px\" viewBox=\"0 0 135 135\" preserveAspectRatio=\"xMidYMid\" stroke=\"\" style=\"width:120px; height:120px; position:fixed; top:50%; margin-top:-60px; left:50%; margin-left:-60px; opacity:1; display:none; fill:#404040; background-color:transparent; border-radius:12px;\"><path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"-360 67 67\" dur=\"2.5s\" repeatCount=\"indefinite\" ><\/path><path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 67 67\" to=\"360 67 67\" dur=\"8s\" repeatCount=\"indefinite\" ><\/path><\/svg><\/div><\/div>\n<!-- End [wppa type=\"mphoto\" photo=\"4736\"] \/fr\/wp-json\/wp\/v2\/pages\/5652 oc 3 17 queries in 34.4 ms. at 23:33. Max mem: 62.50 Mb. --><\/p>\n<h6>Search dialog related styles<\/h6>\n<p>Unfortunately most themes handle the styles of an text input field completely different as the syles for selectionboxes. This means that you should add some custom css in the wp customizer to get the selection boxes aligned with the search text input field. Examples for a few themes follow:<\/p>\n<p><b>TwentySeventeen<\/b><\/p>\n<pre>\r\n\/* Size search selection boxes *\/\r\n.wppa-searchselbox {\r\npadding: 0.57em 0.4375em;\r\nbackground-color:#f7f7f7;\r\nborder:none;\r\nline-height:normal;\r\n}\r\n\/* Position search box *\/\r\n.wppa-search label {\r\nmargin:0 !important;\r\n}\r\n<\/pre>\n<p><b>TwentySixteen<\/b><\/p>\n<pre>\r\n\/* Size search selection boxes *\/\r\n.wppa-searchselbox {\r\npadding: 0.57em 0.4375em;\r\nbackground-color:#f7f7f7;\r\nborder:none;\r\nline-height:normal;\r\nborder-radius: 2px 0 0 2px;\r\n}<\/pre>\n<p><b>TwentyFifteen<\/b><\/p>\n<pre>\r\n\/* Size search selection boxes *\/\r\n.wppa-searchselbox {\r\npadding: 0.5278em;\r\nbackground-color:#f7f7f7;\r\nborder:none;\r\nline-height:normal;\r\n}\r\n<\/pre>\n<p><b>TwentyFourteen<\/b><\/p>\n<pre>\r\n\/* Size search selection boxes *\/\r\n.wppa-searchselbox {\r\npadding: 8px 10px 7px;\r\nbackground-color:#f7f7f7;\r\nborder:none;\r\nline-height:normal;\r\n}\r\n<\/pre>\n<p><b>TwentyThirteen<\/b><\/p>\n<pre>\r\n\/* Size search selection boxes *\/\r\n.wppa-searchselbox {\r\nborder: 2px solid #d4d0ba;\r\nfont-family: inherit;\r\npadding: 4px;\r\nline-height:normal;\r\ncolor: #141412;\r\n}\r\n<\/pre>\n<p><b>Suffusion<\/B><\/p>\n<pre>\r\n\/* Search selection boxes *\/\r\n.wppa-searchselbox {\r\nmargin-top:4px !important;\r\npadding: 4px 7px 1px 5px !important;\r\n}\r\n<\/pre>\n<p>If you did not modify searchform.php you will need to add on the page:<br \/>\n<code>&lt;script type=\"text\/javascript\">jQuery('.searchfield').removeAttr('onblur').val('');&lt;\/script><\/code><br \/>\nThis prevents the word 'Search' from coming back in case you do not want to add a 'manual' search token.<br \/>\nIt is better to change in searchform.php:<\/p>\n<pre>\r\n\tvalue=\"&lt;?php _e('Search','suffusion');?&gt;\"\r\n\tonfocus=\"if (this.value == '&lt;?php _e(\"Search\",\"suffusion\");?&gt;') {this.value = '';}\"\r\n\tonblur=\"if (this.value == '') {this.value = '&lt;?php _e(\"Search\",\"suffusion\");?&gt;';}\"\r\n<\/pre>\n<p>into:<\/p>\n<pre>\r\n\tplaceholder=\"&lt;?php esc_attr( _e('Search','suffusion') ); ?&gt;\"\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"<p>The regular search photos has a few extensions. - You can add a category slectionbox. When included, the search dialog shows a selectionbox with all album categories that exist in the system. When a visitor selects a category, only photos will be found that reside in albums with the selected category. If album search is <a href='https:\/\/wppa.nl\/fr\/docs-by-subject\/search\/regular-search-with-extended-features\/' class='excerpt-more'>[...]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":4735,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5652","page","type-page","status-publish","hentry","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/pages\/5652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/comments?post=5652"}],"version-history":[{"count":3,"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/pages\/5652\/revisions"}],"predecessor-version":[{"id":6773,"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/pages\/5652\/revisions\/6773"}],"up":[{"embeddable":true,"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/pages\/4735"}],"wp:attachment":[{"href":"https:\/\/wppa.nl\/fr\/wp-json\/wp\/v2\/media?parent=5652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}