How to add text prompt to WordPress search box

Time:2020-1-22

As in Nicky’s blog, I found the search bar below

Searchbox in iBlue

Adding such prompt information in the search column can guide visitors to search the website, especially for technical and sharing websites

In order to maintain a good user experience, we will generally keep the last search keywords after the search, as shown in the figure below is the status of the search bar after the search of the ‘WordPress’ keyword

Searchbox in iNove

As for the search box, I think we need to pay attention to the following points

(1) When building a search box, the value of value should be the keyword value instead of the search bar prompt. Maybe you will say that many people regard prompt as the initial content of the search bar, but I think it’s not good. Google and Baidu both use the keyword of the last search as the initial content of the search bar. So I suggest that when there are keywords, they should be displayed without keywords Display the prompt when

(2) If there is no keyword content in the input box, when the mouse clicks the search input box, we need to make the prompt disappear; when the mouse leaves the input box, we need to display the prompt again. This requires us to judge the input information, how to judge? The simplest way is to compare the character string, so it requires us to use some uncommon text string as the prompt, remember to use “search” And “search” these text strings that may become keywords as prompts

(3) If the search bar also provides a submit button, then when clicking the submit button, the content of the search box should also be detected. If it is a prompt, the search will not be performed

Using JavaScript to realize the prompt information of search box

Here is my jQuery code for adding prompt information on my own iNove theme. Please pay attention to the code comments

Copy code

The code is as follows:

jQuery(document).ready(
function(){
//When the mouse is focused on the search box
jQuery(‘#searchbox .textfield’).focus(
function() {
//If the content of the search box is “type text to search here…”, the text color becomes darker and the content is empty
if(jQuery(this).val() == ‘Type text to search here…’) {
jQuery(this).css({color:”#555″}).val(”);
}
}
//When the mouse loses focus in the search box
).blur(
function(){
//If the content of the search box is empty, the text color becomes lighter and the words “type text to search here…” are displayed
if(jQuery(this).val() == ”) {
jQuery(this).css({color:”#999″}).val(‘Type text to search here…’);
}
}
);
//When you click the search button
jQuery(‘#searchbox .button’).click(
function() {
//If the content of the search box is “type text to search here…” or empty, do nothing
if(jQuery(‘#searchbox .textfield’).val() == ” || jQuery(‘#searchbox .textfield’).val() == ‘Type text to search here…’) {
return false;
//Otherwise submit and search
} else {
jQuery(this).submit();
}
}
);
//Events that occur when the DOM is loaded
jQuery(
function() {
//If the content of the search box is “type text to search here…” or it is empty, the text color becomes lighter and the words “type text to search here…” are displayed
if(jQuery(‘#searchbox .textfield’).val() == ” || jQuery(‘#searchbox .textfield’).val() == ‘Type text to search here…’) {
jQuery(‘#searchbox .textfield’).css({color:”#999″}).val(‘Type text to search here…’);
}
}
);
}
)

The principle is very simple. Pure JS implementation is just for maintenance convenience. You can choose other methods. I didn’t add this function in the published topic because the code implemented by JS can’t be internationalized, which is a bit embarrassing. If you really like it, you can try to implement it yourself

Recommended Today

PHP realizes UnionPay business H5 payment

UnionPay business H5 payment interface document: document address 1: H5 payment interface address: 1: Alipay payment Test address: http://58.247.0.18:29015/v1/netpay/trade/h5-pay Official address: https://api-mop.chinaums.com/ 2: UnionPay payment Test address: http://58.247.0.18:29015/v1/netpay/uac/order Official address: https://api-mop.chinaums.com/ 2: Basic parameters required by the interface The interface uses get parameters. After the interface parameters are directly put into the interface address, the […]