JavaScript automatically completes the search box (1 ).

JavaScript automatically completes the search box (1 ).

In many websites that need to be searched, there will be an automatically completed search box. users can search for the search term they want. help users quickly find the desired results. this method is friendly. therefore, it is strongly recommended.

First, we will show you:

To implement this function, the server must cooperate. The client uses a script to display the data obtained from the server.

First look at the client's HTML:

The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
The server code. We can use JSP or PHP here. The server doesn't matter. The key is to transmit data.

The Code is as follows:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String []words = {"amani","abc","apple","abstract","an","bike","byebye", "beat","be","bing","come","cup","class","calendar","china"}; if(request.getParameter("search-text") != null) { String key = request.getParameter("search-text"); if(key.length() != 0){ String json="["; for(int i = 0; i < words.length; i++) { if(words[i].startsWith(key)){ json += "\""+ words[i] + "\"" + ","; } } json = json.substring(0,json.length()-1>0?json.length()-1:1); json += "]"; System.out.println("json:" + json); out.println(json); } } %> 
The entire process is actually quite clear. First, register the keyup event in the input box, and then obtain the json object through ajax in the event. After obtaining the data, create a li tag for each item of data and register the click event on the tag, so that when we click each item, we can respond to the event. The key to keyboard navigation is to record the current highlighted index value and adjust the background highlighted Based on the index value. The position of the displayed drop-down list must be set based on the position of the input box. When the browser size changes, the position of the drop-down list can be adjusted at any time.
The above section describes how to use JavaScript to automatically complete the search box (1). I hope it will be helpful to you!
Articles you may be interested in:

 

 
  
The text appears when the text in the javascript search box is deprecated.
 
  
JS + CSS Implementation of Sina Weibo search box Imitation Method
 
  
Implement up/down key switch control on the keyboard in the ecshop search box using javascript
 
  
JS implementation of smart prompts like google and Baidu search boxes
 
  
Implementation of the javascript search box Effect
 
  
Javascript implementation is similar to the pop-up effect of Sina Weibo search box
 
  
Js achieves the nice search box Effect of YouKu
 
  
JavaScript code for keyword intelligent match in the search box