Enter the javascript: sugggestion. js_javascript tips for the automatic prompt search function

The code in this js file implements the [input automatic search prompt] function. For example, if you enter some characters in the search box of Baidu or google, some prompts will be displayed in the following pull list form, which improves the user experience. The Code is as follows:

/**
* Function: the code in this js file provides the [enter automatic search prompt] function. For example, if you enter some characters in the search box of Baidu or google, the following prompts are displayed in the list, improving the user experience.
* Instructions for use: see the suggestions.txt file.
* Author: sunfei (Sun Fei) Date: 2013.08.21
*/
Var SugObj = new Object ();

$ (Document). ready (function (){

// Obtain the attribute information of the input box after the file is loaded to ensure that the display results of the Search Prompt data and the data in the text input box are consistent.
// Use the default ID in the Search Prompt input box
SugObj. keywords_input_id = "keywords_input ";
// Search the input box height
SugObj. keywords_input_height = $ ("#" + SugObj. keywords_input_id + ""). height ();
// Search the width of the input box
SugObj. keywords_input_width = $ ("#" + SugObj. keywords_input_id + ""). width ();
// Search the font color of the width of the input box
SugObj. keywords_input_color = $ ("#" + SugObj. keywords_input_id + "" ).css ("color ");
// Search the font size of the input box width
SugObj. keywords_input_font_size = $ ("#" + SugObj. keywords_input_id + "" ).css ("font-size ");
// User input value
SugObj. keywords_input_value = null;

// Set the style for displaying the Search Prompt p
// ID of the DIV that displays the prompt information
SugObj. suggestion_p_id = "sug_layer_p ";
// The default prompt message DIV Style
$ ("#" + SugObj. suggestion_p_id + ""). addClass ("sugLayerDiv ");
// Set the DIV width based on the input box
$ ("#" + SugObj. suggestion_p_id + "" ).css ("width", SugObj. keywords_input_width );
// $ ("#" + SugObj. suggestion_p_id + "" ).css ("position", "relative ");
// $ ("#" + SugObj. suggestion_p_id + "" ).css ("overflow", "hidden"); // hide when DIV content overflows
// $ ("#" + SugObj. suggestion_p_id + "" ).css ("background", "# fff"); // DIV background color
// $ ("#" + SugObj. suggestion_p_id + "" ).css ("border", "# c5dadb 1px solid"); // DIV border Style
// $ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "none"); // DIV initial hiding

// The number of prompts is displayed by default.
SugObj. default_showItem_count = 10;
// Set the number of clicks "more ".
SugObj. more_showItem_count = 20;
// Specifies the position of the upstream/downstream key.
SugObj. cursor_now_position =-1;
});


// Performance considerations: if a user enters a letter and transmits it to the server immediately, the server will carry too much data,
// Therefore, the latency of each request is seconds (to be considered)

$ (Document). ready (function (){

// The id of the input box is keywords_input. Here, the keyup event of the input box is monitored.
$ ("#" + SugObj. keywords_input_id + ""). keyup (function (event ){
If (event. keyCode >=48 & event. keyCode <= 57) | (event. keyCode> = 96 & event. keyCode <= 105) |
(Event. keyCode> = 65 & event. keyCode <= 90 | event. keyCode = 8 )){
// Obtain the value of token in the input box
Var kw = $ ("#" + SugObj. keywords_input_id + ""). val ();
// Remove the spaces at both ends of the input string
Kw = kw. replace (/(^ \ s *) | (\ s * $)/g ,"");
If (kw = ""){
// Clear the DIV content
$ ("#" + SugObj. suggestion_p_id + ""). empty ();
// Hide the DIV
$ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "none ");
} Else {
// Save the user input value to the SugObj object
SugObj. keywords_input_value = kw;
// Run the Ajax request result
RunSearchAjax (0 );
}
} Else if (event. keyCode = 38) {// Up Arrow
If (-- SugObj. cursor_now_position =-1) {// determines whether the auto-minus value has been moved to the text box.
$ ("#" + SugObj. keywords_input_id + ""). val (SugObj. keywords_input_value );
// Remove the style of the prompt result # fff-white
$ ("# ShowDataTable tr. line" ).css ("background", "# fff ");
} Else if (SugObj. cursor_now_position =-2) {// after the text box is displayed, move Up-Arrow to the last row.
// Search prompts that the result index starts from 0
Var index = $ ("# showDataTable tr. line"). length-1;
// If the submitted search result is 0, return
If (index <0 ){
Return;
}
// Obtain the last prompt result
$ ("#" + SugObj. keywords_input_id + ""). val ($ ("# showDataTable tr. line") [index]). text ());
$ ("# ShowDataTable tr. line" )[index]).siblings().css ("background", "# fff" ).end().css ("background", "# c0c0c0 ");
SugObj. cursor_now_position = index;
} Else {
$ ("#" + SugObj. keywords_input_id + ""). val ($ ("# showDataTable tr. line") [SugObj. cursor_now_position]). text ());
$ ("# ShowDataTable tr. line" commandid sugobj.cursor_now_position+).siblings().css ("background", "# fff" 2.16.end().css ("background", "# c0c0c0 ");
}
} Else if (event. keyCode = 40) {// Down Arrow
Var trCount = $ ("# showDataTable tr. line"). length;
If (++ SugObj. cursor_now_position = trCount) {// determine whether the value of cursor_now_position exceeds the limit of the number of lists after the plus one operation
// If the value exceeds the limit, the cursor_now_position value is changed to the initial value.
SugObj. cursor_now_position =-1;
// Set the median value in the text box to the user for search
$ ("#" + SugObj. keywords_input_id + ""). val (SugObj. keywords_input_value );
// Remove the style of the prompt result
$ ("# ShowDataTable tr" ).css ("background", "# fff ");
} Else {
$ ("#" + SugObj. keywords_input_id + ""). val ($ ("# showDataTable tr. line ") [SugObj. cursor_now_position]). text (); // display the current result in the input box
$ ("# ShowDataTable tr. line" commandid sugobj.cursor_now_position+).siblings().css ("background", "# fff" 2.16.end().css ("background", "# c0c0c0 ");
}
} // End if
});

// Hide the search prompt when the cursor leaves the input box
$ ("#" + SugObj. keywords_input_id + ""). blur (function (){

Var intId = window. setInterval (function (){
$ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "none ");
Window. clearInterval (intId );
},200 );

$ ("#" + SugObj. suggestion_p_id + "tr. line"). click (function (){
Window. clearInterval (intId );
$ ("#" + SugObj. keywords_input_id + ""). val ($ (this). text ());
$ ("#" + SugObj. keywords_input_id + ""). focus ();
SugObj. cursor_now_position =-1;
RunSearchAjax (0 );
});

$ ("#" + SugObj. suggestion_p_id + "tr. moreline"). click (function (){
Window. clearInterval (intId );
$ ("#" + SugObj. keywords_input_id + ""). focus ();
SugObj. cursor_now_position =-1;
RunSearchAjax (1 );
});
});

});

// IsMore is 1: if there are more than 20, only 20 are displayed. If there are less than 20, how many are displayed?
// IsMore is 0: if there are more than 10 entries, only 10 entries are displayed. If there are fewer than 10 entries, how much is displayed?
Function runSearchAjax (isMore ){
$. Ajax ({
Type: "GET ",
DataType: "json ",
Url: $ ("#" + SugObj. keywords_input_id + ""). attr ("searchURL "),
Data :{
"Keywords_input": escape ($ ("#" + SugObj. keywords_input_id + ""). val ())
},
Success: function (data, status ){
If (data. sugList = null | data. sugList = undefined | data. sugList. length = 0 ){
$ ("#" + SugObj. suggestion_p_id + ""). empty ();
$ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "none ");
} Else {
// Var result = $. parseJSON (data. sugList );
Var result = data. sugList;
Var dataArray = [];
$. Each (result, function (I, value ){
DataArray. push (value );
});
// Obtain the number of records
Var dataItemLength = dataArray. length;
If (dataItemLength <= 0 ){
Return; // If the submitted search result is 0
}

Var layerLabel = [];
LayerLabel. push ("

"); // Create a tableIf (isMore = 0 ){If (dataItemLength <= SugObj. default_showItem_count ){For (var I = 0; I <dataItemLength; ++ I ){LayerLabel. push (" LayerLabel. push ("class = 'line'> ");}} Else {For (var I = 0; I <SugObj. default_showItem_count; ++ I ){LayerLabel. push (" LayerLabel. push ("class = 'line'> ");}LayerLabel. push (" LayerLabel. push ("class = 'moreline '> ");}} Else if (isMore = 1 ){If (dataItemLength <= SugObj. more_showItem_count ){For (var I = 0; I <dataItemLength; ++ I ){LayerLabel. push (" LayerLabel. push ("class = 'line'> ");}} Else {For (var I = 0; I <SugObj. more_showItem_count; ++ I ){LayerLabel. push (" LayerLabel. push ("class = 'line'> ");}}} Else {For (var I = 0; I <dataItemLength; ++ I ){LayerLabel. push (" LayerLabel. push ("class = 'line'> ");}}LayerLabel. push ("

"+ DataArray [I] +"

"+ DataArray [I] +"

"); LayerLabel. push ("more...

"+ DataArray [I] +"

"+ DataArray [I] +"

"+ DataArray [I] +"

");
Var layer = layerLabel. join ("");
// Display DIV
$ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "block ");
// Clear # All child elements under searchResult
$ ("#" + SugObj. suggestion_p_id + ""). empty ();
// Insert the newly created table into # searchResult
$ ("#" + SugObj. suggestion_p_id + ""). append (layer );
$ ("# ShowDataTable tr" ).css ("color", SugObj. keywords_input_color );
$ ("# ShowDataTable tr" ).css ("font-size", SugObj. keywords_input_font_size );
// Listen to the mouse hover event in the prompt box
$ ("Tr. line"). hover (function (){
$ ("Tr. line" ).css ("background", "# fff ");
Certificate (this).css ("background", "# c0c0c0 ");
}, Function (){
Certificate (this).css ("background", "# fff ");
});
}
}
});
}

// The coordinates of the input box change.
Function ChangeCoords (){
// Obtain the distance, pixel, and integer from the leftmost end.
Var left = $ ("#" + SugObj. keywords_input_id + ""). offsetLeft;
// Obtain the distance, pixel, and integer from the top.
Var top = $ ("#" + SugObj. keywords_input_id + ""). offsetTop + keywords_input_height;
// Redefine CSS attributes
$ ("#" + SugObj. suggestion_p_id + "" ).css ("left", left + "px ");
$ ("#" + SugObj. suggestion_p_id + "" ).css ("top", top + "px ");
}

// Listen to the mouse-Click Event of the search result
Function hoverAction (data ){
// Hide the Search Prompt DIV
$ ("#" + SugObj. suggestion_p_id + "" ).css ("display", "none ");
// Add the clicked data to the search prompt input box
$ ("#" + SugObj. suggestion_p_id + ""). val (data );
// Focus the cursor on the Search Prompt input box
$ ("#" + SugObj. suggestion_p_id + ""). focus ();
// Change the value of cursor_now_position to the initial value.
Cursor_now_position =-1;
// Run the Ajax method to send a request to the server
RunSearchAjax (0 );
}

// If the size of the form changes, the resize () event is triggered. You only need to call the ChangeCoords () method in the event.
$ (Window). resize (ChangeCoords );