Copy Code code as follows:
<div class= "searchwellist" > Quick query: <select id= "Searchselect" runat= "Server" ><option value= "1" selected= "Selected" > by inner tube code </option><option value= "2" > by tag Code </option></select></div>
<div class= "Searchwel" id= "Search_div" ><input "text" type= "id=" "fastsearchtxt" input the individual code or the inner tube code "value=". NameList "onfocus=" if (value== ' input individual encoding or inner tube encoding ') {value= '} ' onblur= ' if (value== ') {value= ' input individual encoding or inner tube encoding '} '/></div >
Here is the referenced JS file
Copy Code code as follows:
$ (document). Ready (function () {
$ ("#fastsearchTxt"). KeyUp (function () {
Ajax gets data from a database query
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); Make parameters Override
var bindevent = function (o) {
var tmpid = "Tmpselector_" + $ (o). attr ("id"); Generate a temporary ID
if ($ ("#" + tmpid). Length > 0) {
$ ("#" + tmpid). Remove ();
Return Quit, don't go on
}
var datas = Options.data.split (', '); Data source
Set to absolute in the style here
var html = "<div id= '" + tmpid + "' style= ' border:1px solid; overflow:auto;background:white;width:153px; ' ><ul class= ' ui-menu ' > ';
Dynamically generate a div that contains 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 ();
};
Sets the width, position, and so on 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 in function.
}
});
};
This.each (function () {//Because the selectors of jquery may match multiple objects, you need each to operate on each matching element.
if ($ (this). Is (": text") = = True) {
$ (this). KeyUp (function () {
Bindevent ($ (this)); Set the content to be done
//});
}
});
};
}) (JQuery);
