Enter the javascript:sugggestion.js_javascript trick for the auto-suggest search prompt function

Copy code The code is as follows:

/**
* Function: The code in this js file implements the [Input automatic search prompt] function. For example, entering some characters into the Baidu and Google search boxes will give some prompts in the form of a drop-down list, which improves the user experience
* Instructions for use: See suggestions.txt file
* Author: sunfei (Sun Fei) Date: 2013.08.21
*/
var SugObj = new Object();

$(document).ready(function(){

// After the file is loaded, obtain the input box attribute information to ensure that the display effect of the search prompt data and the data in the text input box are consistent
//Use the search prompt function input box default ID
SugObj.keywords_input_id = "keywords_input";
//Search input box height
SugObj.keywords_input_height = $("#" SugObj.keywords_input_id "").height();
//Search input box width
SugObj.keywords_input_width = $(" #" SugObj.keywords_input_id "").width();
//Search input box width font color
SugObj.keywords_input_color = $("#" SugObj.keywords_input_id "").css("color");
//Search input box width font size
SugObj.keywords_input_font_size = $("#" SugObj.keywords_input_id "").css("font-size");
//Value entered by the user
SugObj.keywords_input_value = null;

//Set the style of the div that displays search prompts
//The ID of the DIV that displays the prompt information
SugObj.suggestion_div_id = "sug_layer_div";
// Default prompt information DIV style
$("#" SugObj.suggestion_div_id "").addClass("sugLayerDiv");
//Set the DIV width according to the input box
$("#" SugObj.suggestion_div_id "").css("width",SugObj.keywords_input_width);
//$("#" SugObj.suggestion_div_id "").css("position","relative");
//$( "#" SugObj.suggestion_div_id "").css("overflow","hidden");//Hide when DIV content overflows
//$("#" SugObj.suggestion_div_id "").css("background" ,"#fff");//DIV background color
//$("#" SugObj.suggestion_div_id "").css("border","#c5dadb 1px solid");//DIV border style
//$("#" SugObj.suggestion_div_id "").css("display","none");//DIV initial hiding

//The prompt result displays the number of prompts by default
SugObj. default_showItem_count = 10;
//Set the number displayed when clicking "more"
SugObj.more_showItem_count = 20;
//Mark the position of the up and down keys
SugObj.cursor_now_position = -1;
});


//Performance considerations: If the user immediately transmits a letter to the server, the load on the server will be too large.
//So consider changing it to Each request is sent with a delay of 0.5s (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 = 96 && event.keyCode (event.keyCode >= 65 && event.keyCode // Get the value of 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 DIV content
$("#" SugObj.suggestion_div_id " ").empty();
//Hide DIV
$("#" SugObj.suggestion_div_id "").css("display","none");
} else {
/ /Save the user input value into 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) {//Determine whether it has been moved to the text box after decrementing by one
$("#" 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) {//Press Up-Arrow after the text box to move to the last line
//The search prompt result index starts from 0
var index = $ ("#showDataTable tr.line").length - 1;
//If the search submission result is 0, return
if (index return;
}
//Get 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")[SugObj.cursor_now_position]).siblings().css("background","#fff").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 cursor_now_position value exceeds the list number limit after adding one operation
//If it exceeds, change the cursor_now_position value to the initial value
SugObj.cursor_now_position = - 1;
//Set the value in the text box to the user’s search
$("#" SugObj.keywords_input_id "").val(SugObj.keywords_input_value);
//Remove the prompt results Style
$("#showDataTable tr").css("background","#fff");
}else {
$("#" SugObj.keywords_input_id "").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text()); //Display the current results in In the input box
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").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_div_id "").css("display", "none");
window.clearInterval(intId);
},200);

$("#" SugObj.suggestion_div_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_div_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 twenty items, only twenty will be displayed, if there are less If there are more than twenty items, the number will be displayed.
//isMore is 0: if there are more than ten items, only ten will be displayed. If there are less than ten, the number will be 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_div_id "").empty();
$("# " SugObj.suggestion_div_id "").css("display","none");
} else {
//var result = $.parseJSON(data.sugList);
var result = data. sugList;
var dataArray = [];
$.each(result,function(i,value){
dataArray.push(value);
});
//Get records The number of
var dataItemLength = dataArray.length;
if (dataItemLength return; //If the search submission result is 0, then return
}

var layerLabel = [];
layerLabel.push(" ");//Create a table
if (isMore == 0) {
if (dataItemLength for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' >");
}
layerLabel.push(" layerLabel.push(" class='moreline'> ");
}
} else if (isMore == 1) {
if (dataItemLength for (var i = 0; i layerLabel.push(" < ;tr style='cursor:pointer;color:" SugObj.keywords_input_color ";font-size:" SugObj.keywords_input_font_size "' ");
layerLabel.push(" class='line' > ");
}
}else{
for (var i = 0; i layerLabel.push(" layerLabel.push(" class='line' > ");
}
}
}else{
for (var i = 0; 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_div_id "" ).css("display","block");
//First clear all child elements under #searchResult
$("#" SugObj.suggestion_div_id "").empty();
/ /Insert the newly created table into #searchResult
$("#" SugObj.suggestion_div_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 of the prompt box
$("tr. line").hover(function(){
$("tr.line").css("background","#fff");
$(this).css("background","# c0c0c0");
},function(){
$(this).css("background","#fff");
});
}
}
});
}

//The coordinates of the input box change
function ChangeCoords() {
//Get the distance from the leftmost end, pixel, integer
var left = $("#" SugObj.keywords_input_id "").offsetLeft;
//Get the distance from the top, pixels, integer
var top = $("#" SugObj.keywords_input_id "").offsetTop keywords_input_height;
//Redefine CSS attributes
$("#" SugObj.suggestion_div_id "").css("left",left "px");
$("#" SugObj.suggestion_div_id " ").css("top",top "px");
}

//Listen to the mouse click event of the search prompt results
function hoverAction(data) {
// Hide search prompt DIV
$("#" SugObj.suggestion_div_id "").css("display","none");
//Add click data to the search prompt input box
$( "#" SugObj.suggestion_div_id "").val(data);
//Focus the cursor in the search prompt input box
$("#" SugObj.suggestion_div_id "").focus();
//Change the cursor_now_position value to the initial value
cursor_now_position = -1;
//Run the Ajax method and send a request to the server
runSearchAjax(0);
}

/ /The size change of the form will trigger the resize() event, just call the ChangeCoords() method within the event
$(window).resize(ChangeCoords);