select下拉框实现搜索功能

   2020-07-03 09:37:51

html javascript

html代码如下：

引入jquery后，js代码如下：

$(document).ready(function(){
    //取消Enter按键提交表单
    document.onkeydown = function(event) {
        var target, code, tag;
        if (!event) {
            event = window.event; //针对ie浏览器
            target = event.srcElement;
            code = event.keyCode;
            if (code == 13) {
                tag = target.tagName;
                if (tag == "TEXTAREA") { return true; }
                else { return false; }
            }
        }
        else {
            target = event.target; //针对遵循w3c标准的浏览器，如Firefox
            code = event.keyCode;
            if (code == 13) {
                tag = target.tagName;
                if (tag == "INPUT") { return false; }
                else { return true; }
            }
        }
    };
    //Enter搜索option，为其添加selected属性
    $('#search_f').keydown(function (e) { 
        var key = e.which; 
        if (key == 13) {
            var keyword = $('#search_f').val().toLowerCase()
            $('#ss option').each(function(){
                var type = $(this).html().toLowerCase()
                var regexp = keyword+'.*'
                var res = type.match(regexp)
                if (res) {
                    $(this).attr("selected",true)
                    $(this).siblings().attr("selected",false)
                    return false
                }
            })
        }  
    });
});