jquery 实现select 远程搜索+懒加载

核心是 oninput 输入时触发事件
核心代码如下

<input id="name" oninput="search()" type="text">
<span class="clear" onclick="delInput()">×</span>
<div class="select-form">
    <dl></dl>
</div>
//避免重复请求
var searchFlag = true
var list = []
function search(){
    if($('#name').val() && searchFlag){
        searchFlag = false
        $('dl').html('')
        $.ajax({
            url: 'xxx',
            type : 'post',
            data: {name: $('#name').val()},
            success: (res)=>{
                if(res){
                    list = eval('(' + res + ')')
                    if(list.length > 0){
                        list.forEach((item, index, input)=>{
                            $('dl').append('<dd οnclick="select(\''+item.id+'\')">'+item.name+'</dd>')
                            $('.select-form').css('display', 'block')
                        })
                    }else{
                        $('.err').css('display', 'block')
                    }
                }
                searchFlag = true
            }
        })
    }else{
        list = []
    }
}

function delInput(){
    $('#name').val('')
    $('dl').html('')
    $('.select-form').css('display', 'none')
    list = []
    selObj = {}
}
.select-form{
    display: none;
}

再调调样式,小功告成
效果图:
在这里插入图片描述

在这里插入图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值