Imitation Baidu input Prompt function

<reference path= "Jquery-1.7.1.min.js"/>

Implement input hint of search input box JS class

function Osearchsuggest (SEARCHFUC) {

var input = $ (' #txtNaviSearchBox ');

var suggestwrap = $ (' #gov_search_suggest ');

var key = "";

var init = function () {

Input.bind (' KeyUp ', Sendkeyword);

Input.bind (' Blur ', function () {setTimeout (hidesuggest, 100);})

}

var hidesuggest = function () {

Suggestwrap.hide ();

}

Send a request, according to the keyword to the background query

var Sendkeyword = function (event) {

Keyboard selection drop-down item

if (suggestwrap.css (' display ') = = ' block ' && event.keycode = = | | event.keycode = = 40) {

var current = Suggestwrap.find (' li.bdsug-s ');

if (Event.keycode = = 38) {

if (Current.length > 0) {

var Prevli = current.removeclass (' bdsug-s '). Prev ();

if (Prevli.length > 0) {

Prevli.addclass (' bdsug-s ');

Input.val (prevli.html ());

}

} else {

var last = suggestwrap.find (' li:last ');

Last.addclass (' bdsug-s ');

Input.val (last.html ());

}

} else if (Event.keycode = = 40) {

if (Current.length > 0) {

var Nextli = current.removeclass (' bdsug-s '). Next ();

if (Nextli.length > 0) {

Nextli.addclass (' bdsug-s ');

Input.val (nextli.html ());

}

} else {

var first = Suggestwrap.find (' Li:first ');

First.addclass (' bdsug-s ');

Input.val (first.html ());

}

}

Input character

} else {

var valtext = $.trim (Input.val ());

if (Valtext = = "| | valtext = = key) {

Return

}

SEARCHFUC (Valtext);

key = Valtext;

}

}

After the request is returned, perform the data display

This.datadisplay = function (data) {

if (data.length <= 0) {

Suggestwrap.hide ();

Return

}

Add an entry to the Search box drop-down suggestion bar and display

var Li;

var Tmpfrag = document.createdocumentfragment ();

Suggestwrap.find (' UL '). html (');

for (var i = 0; i < data.length; i++) {

Li = document.createelement (' li ');

li.innerhtml = Data[i];

Tmpfrag.appendchild (LI);

}

Suggestwrap.find (' ul '). Append (Tmpfrag);

Suggestwrap.show ();

Binding mouse events for drop-down options

Suggestwrap.find (' Li '). Hover (function () {

Suggestwrap.find (' Li '). Removeclass (' bdsug-s ');

$ (this). addclass (' bdsug-s ');

Input.val (this.innerhtml);

}, function () {

$ (this). Removeclass (' bdsug-s ');

})

. bind (' hover ', function () {

Alert (3);

Input.val (this.innerhtml);

Suggestwrap.hide ();

// });

}

Init ();

};

Instantiate the input hint js, parameter is the function name to invoke when the query operation

var searchsuggest = new Osearchsuggest (sendkeywordtoback);

This is a modulo function, the implementation of the background to send an AJAX query request, and return a query results data, passed to the foreground JS, and then by the foreground JS to show the data. This function is modified by the programmer to implement the query request

parameter is a string that is the current content in the Search input box

function sendkeywordtoback (keyword) {

/**/var obj = {

"Keyword": keyword

};

$.ajax ({

Type: "POST",

URL: "/navi/naviprompt.aspx?" Navikey= "+ Obj.keyword +" ",

URL: "Default4.aspx",

Async:false,

Data:obj,

DataType: "JSON",

Error:function (x, Y, z) {alert (y)},

Success:function (data) {

var aData = [];

$ (data). each (function () {

Adata.push (this. Title);

})

Pass the returned data to the input hint that implements the search input box JS class

Searchsuggest.datadisplay (AData);

}

});

The following is an analog effect code that returns search results based on input, and the actual data is returned from the background

var aData = [];

Adata.push (keyword + ' return data 1 ');

Adata.push (keyword + ' return data 2 ');

Adata.push (keyword + ' not some people are born vegetarian ');

Adata.push (keyword + ' not some people are born vegetarian ');

Adata.push (keyword + ' 2012 is true ');

Adata.push (keyword + ' 2012 is false ');

Alert (9);

Pass the returned data to the input hint that implements the search input box JS class

Searchsuggest.datadisplay (AData);

}

Copy Code in transit page code: protected void Page_Load (object sender, EventArgs e)

{

if (null! = request.querystring["Navikey"] && ""! = request.querystring["Navikey"])

{

Prompt (request.querystring["Navikey"]);

}

}

<summary>

Search Tips

</summary>

protected void Prompt (string key)

{

NV_NAVICONTENTBLL NCBLL = new NV_NAVICONTENTBLL ();

DataSet ds = Ncbll. Getprompt (String. Format ("Title like '%{0}% ' ORDER by rewardamount Desc", key));

if (ds. Tables[0]. Rows.Count > 0)

{

Response.Write (NCBLL. ToJson (ds. Tables[0]));

Response.End ();

}

}

Imitation Baidu input Prompt function