Ajax smart prompt + textbox dynamic generation of drop-down box sample code

Copy codeThe Code is as follows:
<Div class = "searchwellist"> quick query: <select id = "searchSelect" runat = "server"> <option value = "1" selected = "selected"> by internal code </option> <option value = "2"> tag </option> </select> </div>
<Div class = "searchwel" id = "search_div"> <input type = "text" id = "fastsearchTxt" value = "enter individual or internal code" class = ". namelist "onfocus =" if (value = 'input individual code or internal code ') {value = ''}" onblur = "if (value = '') {value = 'input individual code or internal code '} "/> </div>

 
Below is the referenced js File
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# FastsearchTxt"). keyup (function (){
// Obtain the data queried by the database using ajax.
Var data = $ ("# fastsearchTxt"). val ();
Var num = $ ("# searchSelect option: selected"). val ();
$. Ajax ({
Type: "POST ",
Url: "AjaxSearch. aspx ",
Data: 'Data = '+ data +' & num = '+ num,
Success: function (message ){
$ ("# FastsearchTxt"). beDropdownlist (message );
}
});
});
});

(Function ($ ){
$. Fn. beDropdownlist = function (data ){
// Default Value
Var defaults = {
Data: ['nothing ']
};
Var options = {data: data };
Options = $. extend (defaults, options); // overwrite the Parameter
Var bindevent = function (o ){
Var tmpid = "tmpselector _" + $ (o). attr ("id"); // generate a temporary id
If ($ ("#" + tmpid). length> 0 ){
$ ("#" + Tmpid). remove ();
// Return; // exit. Do not continue.
}
Var datas = options. data. split (','); // data Source
// Set the style to absolute.
Var html = "<div id = '" + tmpid + "'style = 'border: 1px solid gray; max-height: 150px; position: absolute; text-align: left; overflow: auto; background: white; width: 153px; '> <ul class = 'ui-call'> ";
// Dynamically generate a div containing the li Element
For (var item in datas ){
Html + = "<li>" + datas [item] + "</li> ";
}
Html + = "</ul> </div> ";
Var left = $ (o). offset (). left;
Var top = $ (o). offset (). top + $ (o). height () + 4;

Var finalize = function (){
$ ("#" + Tmpid + "li"). unbind ('click'); // cancel event binding
$ ("#" + Tmpid). remove ();
};
// Set the width and position of the div.
$ ("#" + Tmpid). width ($ (o). width () + 100 );
$ ("#" + Tmpid). offset ({top: top, left: left });
$ ("#" + Tmpid). remove ();
$ ("# Search_div"). append (html );

// $ ("#" + Tmpid). mouseleave (function () {finalize ();});
$ ("#" + Tmpid + "li"). click (function (){
$ (O). val ($ (this). text ());
Finalize ();
If (fn! = Undefined ){
Fn (); // call the passed function.
}
});
};
This. each (function () {// because the jquery selector may match multiple objects, you need to use each to operate on each matching element.
If ($ (this). is (": text") = true ){
// $ (This). keyup (function (){
Bindevent ($ (this); // set the content to be done
//});
}
});

};
}) (JQuery );