input下拉框模糊查询

 

<body>

<input type="text" name="business" id="business" class="makeinp"  placeholder="请选择或输入" οnfοcus="setfocus(this)" οninput="setinput(this);" />
 <select name="makeupCoSe" id="typenum" οnchange="changeF(this)" size="10" ></select>

</body>

<script>

window.opts = null; 
var TempArr=[];//存储option 
$(function(){
    /*先将数据存入数组*/
        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type:'GET',
            url:address + "/user/getUser",
            contentType: 'application/json;charset=utf-8',
            async:false,
            dataType:'json',
            success:function(data){               
                $('#typenum').html('')
                for(var i = 0; i<data.length;i++){
                    var opt = $('<option></option>').html('<span>'+data[i].companyName+'</span>')
                    $('#typenum').append(opt)
                }
                opts = $('#typenum>option').clone();
            }
        });       
    $(document).bind('click', function(e) {  
        var e = e || window.event; //浏览器兼容性   
        var elem = e.target || e.srcElement;  
        while (elem) { //循环判断至跟节点,防止点击的是div子元素   
            if (elem.id && (elem.id == 'typenum' || elem.id == "business")) { 
                return; 
            }  
            elem = elem.parentNode;  
        }  
        $('#typenum').css('display', 'none'); //点击的不是div或其子元素   
    });  
})
 
function changeF(this_) {
    $(this_).prev("input").val($(this_).find("option:selected").text());
    $("#typenum").css({"display":"none"});    
}
function setfocus(this_){
    $("#typenum").css({"display":""});
    var select = $("#typenum");
    for(i=0;i<TempArr.length;i++){
        var option = $("<option></option>").text(TempArr[i]);
        select.append(option);
    } 
}
  function setinput(_this){
    if(_this.value==''){
        $('#typenum').html('').append(opts)
        return
    }
   var ret = opts.find('span:contains("'+_this.value+'")').parent()
    $('#typenum').html('').append(ret)
}

</script>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现下拉框模糊查询,可以使用JavaScript来动态过滤下拉框选项。具体实现方式如下: 1. 给下拉框添加一个输入框,用于输入要查询的关键字。 2. 监听这个输入框的change事件,每次输入内容发生变化时,都要重新过滤下拉框选项。 3. 获取下拉框的所有选项,遍历每个选项,判断选项的文本内容是否包含输入框中的关键字,如果包含,则显示该选项,否则隐藏该选项。 以下是一个简单的例子,实现了一个带有输入框的下拉框,可以通过输入框中的关键字来过滤下拉框选项: HTML代码: ```html <label for="select">下拉框:</label> <input type="text" id="select-filter"> <select id="select"> <option value="1">苹果</option> <option value="2">香蕉</option> <option value="3">橙子</option> <option value="4">西瓜</option> <option value="5">葡萄</option> </select> ``` JavaScript代码: ```javascript var select = document.getElementById('select'); var selectFilter = document.getElementById('select-filter'); // 监听输入框变化事件 selectFilter.addEventListener('change', function() { // 获取输入框中的关键字 var keyword = selectFilter.value.toLowerCase(); // 遍历下拉框的选项,过滤掉不符合条件的选项 for (var i = 0; i < select.options.length; i++) { var option = select.options[i]; var text = option.text.toLowerCase(); if (text.indexOf(keyword) >= 0) { option.style.display = ''; } else { option.style.display = 'none'; } } }); ``` 这样就可以实现一个简单的下拉框模糊查询功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值