Instructions for using the auto-suggest search prompt function: suggestion.txt_javascript tips

readme:
This file records the function instructions of suggestion.js file:

Copy code The code is as follows:

/*
* Function: The code in this js file implements the [Input automatic search prompts] function. For example, entering some characters in the Baidu and Google search boxes will give some prompts in the form of a drop-down list. Improved user experience;
* Technology used: JQuery Ajax
*
* 1. How to use this function?
* 1. To use this function, you need to introduce the following files:
* 1)
* 2)
* 3)
* 2. You need to add tags to the file as follows:
*
* < div id="sug_layer_div">

* Description:
* 1). Introduce this file on the page using this function. At the same time, this function uses jQuery technology and relies on jQuery files. You must Introduce the jQuery file before introducing suggestion.js;
* 2). It is assumed that the text input box you need to use this function is: ;
* 3). This is The input tag specifies the id as 'keywords_input', such as ;
* 4). Specify autocomplete as 'off' for the input tag, such as ;
* 5). Add a custom attribute searchURL to the input tag. The value of this attribute is the URL that needs to call the controller method. For example, the getSug method of the sugController controller needs to be called. To return the search prompt data, then
*
* (Spring MVC is used here Frame);
* 6). Add a DIV tag with the id 'sug_layer_div' below the input tag, such as

*
* 3 .Request-response data format description: (json data format)
* 1) Front-end example:
$.ajax({
type: "GET", //AJAX submission method is GET submission
dataType: "json",
url:$("#keywords_input").attr("searchURL"),//The URL address of the processing page
data:{ //Parameters to be passed
"keywords_input ":escape($("#keywords_input").val())
},
success:function(data) {
var result = data.sugList;;//Data required by the front end
...
}
});
* 2) Backend example:
@Controller
@RequestMapping("/el/sug")
@SuppressWarnings( {"rawtypes","unchecked"})
public class SugController extends ElBaseController{
@RequestMapping("getSug")
public void getSuggestion (HttpServletRequest request ,HttpServletResponse response)throws JSONException {
log. info("<------Get search prompt data---SugController.getSuggestion--------->");
JSONObject json = new JSONObject();
String errMsg = "";
List sugList = new LinkedList();
try {
String keyword = request.getParameter("keywords_input");//Data from the front end (in the input box data)
List sugList = SugService.getSuggestionList(keywords_input);

}catch (Exception e) {
errMsg = "An exception occurred while getting data," e.getMessage();
json.put("codeid","FAILURE");
}
json.put("sugList",sugList);//To respond to the front-end data
ajaxResultText(response,json.toString( ));
}
*
* 2. How to understand the implementation of this function?
* After reading the code of this document, you should understand the following basic knowledge:
* 1.keyUp, Some keycode pairs in keyDown and other events:
* key keycode | keykey code | keykey code
* 0 48 9 57 0 (numeric keyboard) 96
* A 65 Z 90 9 (numeric keyboard )105
* BackSpace 8 Up-Arrow 38 Dw-Arrow40
*
* 2. JavaScript escape() function
* The escape() function can encode the string so that it can be used in all The string is read on a computer
* This method does not encode ASCII letters and numbers, nor does it encode the following ASCII punctuation characters: * @ - _ . / .
* All other characters will be replaced by escape sequences. For example: escape("?!=()#%&") --> ?!=()#%&
*
* 3. The autocomplete attribute specifies whether the input field should enable the auto-complete function. Autocomplete allows the browser to predict input to a field.
* When the user starts typing in a field, the browser should display options to fill in the field based on the values ​​previously typed. Set the value of the autocomplete attribute to 'off',
* to turn off the browser's own input prompt function
* Note: The autocomplete attribute is applicable to

, and the following
* < input>Type: text, search, url, telephone, email, password, datepickers, range and color.
*
* Author:sunfei(Sun Fei) Date:2013.08.21
*
*/