首先需要引用jquery-1.7.2.js.
页面下拉框有对应的数据，此下拉框的查询将不与服务器交互。本地下拉框查询。暂不支持通过键盘上下按键和enter键控制
1 // JavaScript Document 2 //使用方法：IniteMyInputSelect('id');IniteMyInputSelect(['id1','id2','id3']); 3 //id不需要加‘#’,且必须是id 4 function IniteMyInputSelect(k) { 5 //如果是数组 6 if ((typeof (k) == 'object') && k.constructor == Array) { 7 for (var i = 0; i < k.length; i++) { 8 $('#' + k[i]).IniteInputSelect(); 9 } 10 } 11 else if ((typeof (k) == 'string') && k.constructor == String) { 12 $('#' + k).IniteInputSelect(); 13 } 14 } 15 $(function ($) { 16 $.fn.IniteInputSelect = function () { 17 $(this).click(function () { 18 var id = $(this).attr('id'); 19 var inputid = id + '_input'; 20 var contentid = id + '_content'; 21 var contentdivid = contentid + ' div'; 22 var idoptionid = id + ' option'; 23 var position = $(this).position(); 24 var wd = parseInt($(this).css('width')) + 20; 25 var input = "<input id='" + inputid + "' type='text' style='" + $(this).attr('style') + "' class='" + $(this).attr('class') + "' /><div id='" + contentid + "' style='position:absolute;z-index:1010;" + wd + "px; height:220px; border:1px solid #CCC; background:#FFF;overflow-x:hidden;overflow-y:auto;left:" + position.left + "px; '></div>"; 26 //创建一个input标签给用户输入 27 $(this).after(input); 28 $(this).hide(); 29 $('#' + inputid).focus(); 30 //注册点击事件 31 $('#' + contentdivid).live('click', function () { 32 var v = $(this).attr('value'); 33 $('#' + id).val(v).show().change(); 34 $('#' + contentid).remove(); 35 $('#' + inputid).remove(); 36 }) 37 //注册鼠标移动上去事件 38 $('#' + contentdivid).live('mouseover', function () { 39 $(this).css('background', '#cacaca').css('color', 'white'); 40 41 }) 42 //注册鼠标移出事件 43 $('#' + contentdivid).live('mouseout', function () { 44 $(this).css('background', '').css('color', 'black'); 45 }) 46 //TODO:有问题需要修改 注册在其他位置点击事件 47 $(document).click(function (e) { 48 var $target = $(e.target); 49 var clickid = $target.attr('id'); 50 if (!(clickid == id || clickid == inputid || clickid == contentdivid || $target.is('#' + contentdivid) || $target.is('#' + id) || $target.is('#' + inputid) || $target.is('#' + id+" option"))) { 51 $('#' + id).show(); 52 $('#' + contentid).remove(); 53 $('#' + inputid).remove(); 54 } 55 }); 56 //筛选结果 开启筛选 57 $('#' + inputid).keyup(function () { 58 var v = $(this).val(); 59 $('#' + contentid).html(''); 60 $('#' + idoptionid).each(function () { 61 if ($(this).html().search(v) > -1 || v == '') { 62 var ct = $(this).html(); 63 var cv = $(this).attr('value'); 64 $('#' + contentid).append('<div value="' + cv + '" style="height:24px;line-height:24px; overflow:hidden;color:black;padding-left:3px;cursor: pointer;">' + ct + '</div>'); 65 } 66 }) 67 68 }) 69 $('#' + inputid).keyup(); 70 }) 71 72 } 73 });