jquery ajax动态模糊查询插件

金刚巨猿神

于 2019-08-14 11:55:31 发布

阅读量467

点赞数

分类专栏： jQuery 文章标签： jQuery ajax模糊查询

本文链接：https://blog.youkuaiyun.com/jianghulangzhongshen/article/details/99551759

版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

html代码如下：

<div id="select_model">
           <div style="width: 150px;line-height: 24px">
                  <input type="text" name="shop_name" autocomplete="off" class="shop-name-input-click" id="shop_name_input" data-url="{:U('CashAdmin/Shop/getLinkShopName')}"/>
                  <input type="hidden" name="shop_id" value="" id="shop_id_input"/>
          </div>
          <div class="shop-name-input-click" style="width: 150px;text-align: left;display: none;max-height:200px;overflow-y :auto;position: absolute;background: #fff;border: 1px solid #000;border-top: 0;" id="search_select_div">
         </div>
 </div>

js代码如下：

ajax接口返回的数据格式：
[{“CONTENT”:“益丰店张师傅”,“CODE”:“1058125”},{“CONTENT”:“方志宏测试”,“CODE”:“1058254”}]

  //封装调用接口获取数据并展示
function req() {
    var url=$("#shop_name_input").attr('data-url');
    var inputval=$("#shop_name_input").val();
    $.ajax({
        type: "POST",
        url: url,
        data: "",
        success:function(data){
            var d=JSON.parse(data);
            var html="";
            for (var i=0;i<d.length;i++) {
                var r = d[i]['CONTENT'].indexOf(inputval);
                if(r != -1){
                    html += "<div class=\"select_label\" data-shopid=\""+d[i]['CODE']+"\" style=\"line-height: 22px;\"><label style='padding-left: 4px;'>"+d[i]['CONTENT']+"</label></div>";
                }
            }
            if(html != ''){
                $("#search_select_div").html(html);
                $("#search_select_div").show();
            }
        }
    });
}
//输入框值改变的时候调用
$("#shop_name_input").on('input propertychange',req);
//输入框聚焦的时候调用
$("#shop_name_input").focus(req);
//事件代理，选择内容，并赋值到标签元素
$("#search_select_div").on("click","label",function(event){
    var elem = $( this );
    var lav=elem.html();
    var shop_id=elem.parent("div").attr("data-shopid");
    $("#shop_name_input").val(lav);
    $("#shop_id_input").val(shop_id);
    $("#search_select_div").hide();
});
//离开选择框隐藏选择框内容
$("body").click(function (e) {
    var inputid = e.target.id;
    var idname = 'shop_name_input';
    if(inputid != idname){
        $("#search_select_div").hide();
    }
});