给下拉框添加模糊查询功能

<div style="position:relative">
<select id="my-select">
<option value="one">选择11111111111111</option>
<option value="two">选择22222222222</option>
<option value="three">选择3333333333333</option>
<option value="four">选择4444444444444</option>
</select>
</div>

(
function(){
/*
select 标签方法
作用：模糊查询
需要给select标签加一个 positioin：relative的div
*/
$.fn.fuzzyQuery = function(options){

var default_option_div_style = {
"line-height":"25px",
"font-size":"12px",
"max-height":"200px",
"z-index":"1999"
}

var _this = $(this);
var _class = _this.attr('class');
//获取select在屏幕中的坐标
var _top = $(this).offset().top;
var _left = $(this).offset().left;
//获取select宽高
var _width = $(this).outerWidth();
var _paddingLeft = ($(this).innerWidth()-$(this).width())/2;
var _height = $(this).height();
//创建合适大小的div覆盖select
var _cover = $('<div id="fuzzy-query-cover" style="position:absolute;"></div>');
_cover.css({"width":_width,"height":_height,"top":0,"left":0});
$(this).parent().children('#fuzzy-query-cover').remove();
_cover.appendTo($(this).parent());
//在覆盖cover中构建input
var _container = $('<div style="position:relative;"><div>');
_container.appendTo(_cover);
//创建input text
var _input = $('<input type="text" style=""/>');
_input.css({"top":"0px","left":"0px","width":_width});
_input.val($(this).find('option:selected').text());
_input.appendTo(_container);
_input.addClass(_class);
//创建下拉框
var _optionDiv = $('<div style="display: none;position: relative;"></div>');
_optionDiv.css({"min-width":'100%',"top:":-_height,"left":"0px"});
_optionDiv.appendTo(_container);

var _optionUl = $('<ul style="position:relative;max-height:200px;overflow-y: scroll;border:1px solid #ccc;background-color: white;margin-bottom: 0px;"></ul>');
_optionUl.css(default_option_div_style);
_optionUl.appendTo(_optionDiv);

var _close = $('<div style="position: relative;border: 1px solid #ccc;border-top:0px;width:100%;color:#999;line-height: 25px;height: 25px;z-index: 1999;background-color:white;"><a id="option-div-close" href="javascript:void(0);" style="float: right;margin-right: 10px;text-decoration: none;">关闭</a></div>');
_close.appendTo(_optionDiv);
_close.find('a').bind('click',function(){
_optionDiv.css('display','none');
});
//###########################################################
//将select中的数据填入input
var data = [];
var _options = $(this).find('option');
_options.each(function(index){
var _v = $(this).attr('value');
var _k = $(this).text();
var kv = {"name":_k,"value":_v};
data[index]=kv;
});
//input获得焦点事件
_input.bind('focus',function(){
var key = $(this).val();
fillData(_optionUl,data,null);
});
//input失去焦点
//input改变事件
_input.bind('input propertychange',function(){
var key = $(this).val();
fillData(_optionUl,data,key);
});
//##################################
//反显
function fillData(target,data,key){
target.children('li').remove();
var data = filter(data,key);
for(var i=0;i<data.length;i++){
var kv = data[i];
var _li = $('<li style="width:100%"></li>');
_li.text(data[i]['name']);
_li.attr('value',data[i]['value']);
_li.css({"padding-left":_paddingLeft});
_li.appendTo(target);
_li.bind('mouseover',function(){
$(this).css({"background-color": "#167fc9"});
});
_li.bind('mouseout',function(){
$(this).css({"background-color": "white"});
});
_li.bind('click',function(){
var _v = $(this).attr('value');
var _n = $(this).text();
_this.val(_v);
_this.trigger('change');
_input.val(_n);
_optionDiv.css('display','none');
});

}
if(data.length>0){
_optionDiv.css('display','block');
}

}

//根据模糊查询过滤
function filter(data,key){
var newData = [];
if('undefined'==data||null==data){
return newData;
}
if(null==key||''==key){
return data;
}
var j = 0;
for(var i=0;i<data.length;i++){
var kv = data[i];
if(kv['name'].indexOf(key)>=0){
newData[j]=data[i];
j++;
}
}
return newData;
}
}
}
)(jQuery)

<script type="text/javascript">
$('#my-select').fuzzyQuery();
</script>