?
?
?
?
var FSelect = (function($){ var _self = this; _self.FastSearch = function(){ } _self.FastSearch.prototype = { create : function(opt){ var _opt = { el : "elementid", getData : function(v){return false}, itemChange : function(item){}, itemSelect : function(item){} }; $.extend(_opt,opt || {}); var _text = $("#" + _opt.el); var _select = (function(){ var html = "<select id='select_list_"+_text.attr("id")+"' style=\"position: absolute; z-index:9999;height: 150px;\" multiple=\"multiple\">"+ "<option value=''>不选择</option></select>"; var el_offset = _text.offset(); var r = $(html).css("top",el_offset.top + _text.height() + 5).css("left",el_offset.left).css("width",_text.width() + 5); r.hide(); $('body').append(r); return r; })(); function show(){ _select.show(); } function hide(){ var fid = document.activeElement.id; if(fid == _text.attr("id")){ if(_text.val()!='') _select.show(); else _select.hide(); }else if(fid == _select.attr("id")){ _select.show(); }else{ _select.hide(); } } function addOption(key,value){ _select.append("<option value='"+key+"'>"+value+"</option>"); } function removeOptions(){ _select.find("option").remove("[value!='']"); } function addOptions(data){ for(var i=0;i<data.length;i++){ addOption(data[i].value,data[i].text); } } $("input,select,textarea,button").each(function(){ $(this).focus(function(){ hide(); }); }); _text.keyup(function(e){ switch(e.keyCode){ case 40: _select.focus(); break; default: removeOptions(); var value = _text.val(); var data = _opt.getData(value); if(data){ addOptions(data); show(); } break; } hide(); }); _select.change(function(){ _opt.itemChange({value:$(this).val(),text:$(this).find("option[selected]").text()}); }); _select.keyup(function(e){ switch(e.keyCode){ case 13: _opt.itemSelect({value:$(this).val(),text:$(this).find("option[selected]").text()}); _text.next("input,select,textarea,button").focus(); _select.hide(); break; } }); _select.click(function(){ _opt.itemSelect({value:$(this).val(),text:$(this).find("option[selected]").text()}); _text.next("input,select,textarea,button").focus(); _select.hide(); }); $(document).click(function(){hide();}); } } return _self; })(jQuery) $(function(){ var s1 = new FSelect.FastSearch(); var opt = { el : "input1", itemChange : function(data){ $("#input2").val(data.text); }, itemSelect : function(data){ $("#input3").val(data.text); }, getData : function(data){ if(data == 1){ return [{value:1,text:'北京'}, {value:2,text:'上海'}]; } if(data == 12){ return [{value:1,text:'北京'}, {value:2,text:'上海'}, {value:3,text:'浙江'}]; } if(data == 123){ return [{value:1,text:'北京'}, {value:2,text:'上海'}, {value:3,text:'浙江'}, {value:4,text:'广泛'}, {value:5,text:'西安'}, {value:6,text:'辽宁'}]; } } } s1.create(opt); });
<body> <input type="text" id="input1"> <select style="border: none;"></select> <input type="text" id="input2"> <input type="text" id="input3"> </body>
??
?