浏览器本地下拉框查询选择js

首先需要引用jquery-1.7.2.js.

页面下拉框有对应的数据，此下拉框的查询将不与服务器交互。本地下拉框查询。暂不支持通过键盘上下按键和enter键控制

---

// JavaScript Document
//使用方法：IniteMyInputSelect('id');IniteMyInputSelect(['id1','id2','id3']);
//id不需要加‘#’,且必须是id
function IniteMyInputSelect(k) {
    //如果是数组
    if ((typeof (k) == 'object') && k.constructor == Array) {
        for (var i = 0; i < k.length; i++) {
            $('#' + k[i]).IniteInputSelect();
        }
    }
    else if ((typeof (k) == 'string') && k.constructor == String) {
        $('#' + k).IniteInputSelect();
    }
}
$(function ($) {
    $.fn.IniteInputSelect = function () {
        $(this).click(function () {
            var id = $(this).attr('id');
            var inputid = id + '_input';
            var contentid = id + '_content';
            var contentdivid = contentid + ' div';
            var idoptionid = id + ' option';
            var position = $(this).position();
            var wd = parseInt($(this).css('width')) + 20;
            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>";
            //创建一个input标签给用户输入
            $(this).after(input);
            $(this).hide();
            $('#' + inputid).focus();
            //注册点击事件
            $('#' + contentdivid).live('click', function () {
                var v = $(this).attr('value');
                $('#' + id).val(v).show().change();
                $('#' + contentid).remove();
                $('#' + inputid).remove();
            })
            //注册鼠标移动上去事件
            $('#' + contentdivid).live('mouseover', function () {
                $(this).css('background', '#cacaca').css('color', 'white');

            })
            //注册鼠标移出事件
            $('#' + contentdivid).live('mouseout', function () {
                $(this).css('background', '').css('color', 'black');
            })
            //TODO:有问题需要修改 注册在其他位置点击事件
            $(document).click(function (e) {
                var $target = $(e.target);
                var clickid = $target.attr('id');
                if (!(clickid == id || clickid == inputid || clickid == contentdivid || $target.is('#' + contentdivid) || $target.is('#' + id) || $target.is('#' + inputid) || $target.is('#' + id+" option"))) {
                    $('#' + id).show();
                    $('#' + contentid).remove();
                    $('#' + inputid).remove();
                }
            });
            //筛选结果 开启筛选
            $('#' + inputid).keyup(function () {
                var v = $(this).val();
                $('#' + contentid).html('');
                $('#' + idoptionid).each(function () {
                    if ($(this).html().search(v) > -1 || v == '') {
                        var ct = $(this).html();
                        var cv = $(this).attr('value');
                        $('#' + contentid).append('<div value="' + cv + '" style="height:24px;line-height:24px; overflow:hidden;color:black;padding-left:3px;cursor: pointer;">' + ct + '</div>');
                    }
                })

            })
            $('#' + inputid).keyup();
        })

    }
});

---