/**
* Function: The code in the JS file to achieve the [input automatic search tips] function, such as Baidu, Google search box to enter some characters will be the following Drop-down list form gives some hints, improve the user experience
* Use instructions: see Suggestions.txt file
* Author:sunfei (Sun Fei) date:2013.08.21
*/
var sugobj = new Object ();
$ (document). Ready (function () {
Get the Input Box property information when the file is loaded, and make sure that the search prompt data and the data in the text entry box are displayed consistently
Use the search prompt function to enter the default ID for the box
sugobj.keywords_input_id = "Keywords_input";
Search for the height of the input box
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");
Values entered by the user
Sugobj.keywords_input_value = null;
Set style to display search hint div
ID of the DIV that displays the hint information
sugobj.suggestion_div_id = "Sug_layer_div";
Default hint Info div style
$ ("#" +sugobj.suggestion_div_id+ ""). AddClass ("Suglayerdiv");
Set div width based on 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"), hidden when content overflows//div
$ ("#" +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 Hide
Prompt results default display number of prompts
Sugobj.default_showitem_count = 10;
Set Click "More" display number
Sugobj.more_showitem_count = 20;
Where to mark the up and down keys
Sugobj.cursor_now_position =-1;
});
Performance considerations: If the user entered a letter immediately to the server, the server's load will be too large,
So consider you can delay each request 0.5s send (to be considered)
$ (document). Ready (function () {
The ID of the input box is keywords_input, where the KeyUp event of the input box is monitored
$ ("#" +sugobj.keywords_input_id+ ""). KeyUp (function (event) {
if ((Event.keycode >= && event.keycode <=57) | | (Event.keycode >= && event.keycode <= 105) | |
(Event.keycode >= && event.keycode <= | | event.keycode = 8)) {
Gets the value of the input box ֵ
var kw = $ ("#" +sugobj.keywords_input_id+ ""). Val ();
Remove the spaces at the ends of the input string
KW = Kw.replace (/(^\s*) | ( \s*$)/g, "");
if (kw = = "") {
Empty DIV Content
$ ("#" +sugobj.suggestion_div_id+ ""). empty ();
Hide Div
$ ("#" +sugobj.suggestion_div_id+ ""). CSS ("display", "none");
} else {
Saving user input values to the Sugobj object
Sugobj.keywords_input_value = kw;
Running AJAX Request Results
Runsearchajax (0);
}
}else if (Event.keycode = =) {//up Arrow
if (--sugobj.cursor_now_position = = 1) {//To determine whether the text box has been moved after the self minus one
$ ("#" +sugobj.keywords_input_id+ ""). Val (Sugobj.keywords_input_value);
Remove the hint result style #fff-white
$ ("#showDataTable tr.line"). CSS ("Background", "#fff");
}else if (sugobj.cursor_now_position = = 2) {//Up-arrow moved to last line after text box
Search hints Results index starting from 0
var index = $ ("#showDataTable tr.line"). Length-1;
The search submission result is 0, then returns
if (Index < 0) {
Return
}
Take the last hint 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 = =) {//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 an operation
The cursor_now_position value is changed to the original value if it is exceeded
Sugobj.cursor_now_position =-1;
and set the value in the text box to the user for searching
$ ("#" +sugobj.keywords_input_id+ ""). Val (Sugobj.keywords_input_value);
Remove the style of the hint result
$ ("#showDataTable tr"). CSS ("Background", "#fff");
}else {
$ ("#" +sugobj.keywords_input_id+ ""). Val ($ ($ ("#showDataTable tr.line") [Sugobj.cursor_now_position]). Text ()); Displays the current result in an input box
$ ($ ("#showDataTable tr.line") [Sugobj.cursor_now_position]). Siblings (). CSS ("Background", "#fff"). End (). CSS (" Background "," #c0c0c0 ");
}
}//end if
});
Hide search hints 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: More than 20 shows only 20, less than 20, then how many show how much
Ismore is 0: More than 10 shows only 10, less than 10, then how many show how much
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 the number of records
var dataitemlength = dataarray.length;
if (dataitemlength <= 0) {
Return The search submission result is 0, then returns
}
var layerlabel = [];
Layerlabel.push ("<table id= ' showdatatable ' width= ' 100% ' >");//Create a table
if (Ismore = = 0) {
if (dataitemlength <= sugobj.default_showitem_count) {
for (var i = 0; i < dataitemlength; ++i) {
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' line ' ><td>" +dataarray[i]+ "</td></tr>");
}
}else{
for (var i = 0; i < Sugobj.default_showitem_count; ++i) {
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' line ' ><td>" +dataarray[i]+ "</td></tr>");
}
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' moreline ' ><td style= ' padding-left:" + (sugobj.keywords_input_width-56) + "px ' >");
Layerlabel.push ("<span style= ' Cursor:pointer;") >more...</span></td></tr> ");
}
}else if (Ismore = = 1) {
if (dataitemlength <= sugobj.more_showitem_count) {
for (var i = 0; i < dataitemlength; ++i) {
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' line ' ><td>" +dataarray[i]+ "</td></tr>");
}
}else{
for (var i = 0; i < Sugobj.more_showitem_count; ++i) {
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' line ' ><td>" +dataarray[i]+ "</td></tr>");
}
}
}else{
for (var i = 0; i < dataitemlength; ++i) {
Layerlabel.push ("<tr style= ' Cursor:pointer;color: +sugobj.keywords_input_color+"; font-size: "+SugObj.keywords _input_font_size+ "'");
Layerlabel.push ("class= ' line ' ><td>" +dataarray[i]+ "</td></tr>");
}
}
Layerlabel.push ("</table>");
var layer = Layerlabel.join ("");
Show Div
$ ("#" +sugobj.suggestion_div_id+ ""). CSS ("Display", "block");
First clear all the child elements under the #searchresult
$ ("#" +sugobj.suggestion_div_id+ ""). empty ();
Inserts the table you just created into the #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);
Mouse hover event on listener balloon
$ ("Tr.line"). Hover (function () {
$ ("Tr.line"). CSS ("Background", "#fff");
$ (this). CSS ("Background", "#c0c0c0");
},function () {
$ (this). CSS ("Background", "#fff");
});
}
}
});
}
The coordinates of the input box are changed
function Changecoords () {
Gets the distance from the leftmost end, pixel, integral type
var left = $ ("#" +sugobj.keywords_input_id+ ""). Offsetleft;
Gets the distance at the top of the distance, pixel, integer
var top = $ ("#" +sugobj.keywords_input_id+ ""). Offsettop+keywords_input_height;
Redefining CSS Properties
$ ("#" +sugobj.suggestion_div_id+ ""). CSS ("left", left+ "px");
$ ("#" +sugobj.suggestion_div_id+ ""). CSS ("Top", top+ "px");
}
Mouse Click event that listens for search prompt results
function Hoveraction (data) {
Hide Search Hint div
$ ("#" +sugobj.suggestion_div_id+ ""). CSS ("display", "none");
Add the 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 an initial value
Cursor_now_position =-1;
Running AJAX methods, sending requests to the server
Runsearchajax (0);
}
The size change of the form triggers the Resize () event, which simply calls the Changecoords () method within the event
$ (window). Resize (changecoords);
