下拉框模糊查询，类似于百度搜索效果

最新推荐文章于 2024-07-26 16:15:39 发布

林不羁

最新推荐文章于 2024-07-26 16:15:39 发布

阅读量2.9k

点赞数 1

分类专栏： HTML 文章标签：前端 js

本文链接：https://blog.csdn.net/qq_36337754/article/details/94160313

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.效果图，实现模糊查询并将选择行的数据填充到输入框中

在这里插入图片描述

2. html

<strong>客户名称：</strong>
    <div class="two-title input-group" style="width: 330px">
           <input type="text" id="keyword" name="keyword"  class="form-control" placeholder="请输入关键词..."  runat="server" />
    </div>
    <div class="panel-body" hidden="hidden" id="panel-body">
          <table class="table  table-hover general-table">
                <tbody id="name"></tbody>//这里我使用了后端动态绑定数据
         </table>
    </div>

3.js

 var name;//客户名称
        var salesId;//客户编号
        $("table tr").live('click', function () {//为表格的行添加点击事件
            var tr = $(this);//找到tr元素
            var td = tr.find("td");//找到td元素
            name = td[0].innerHTML;//指定下标即可
            salesId = td[1].innerHTML;
            $("#keyword").val(name);
            $("#panel-body").hide();
        })
 $(function(){
    //当键盘键被松开时发送Ajax获取数据
    $('#keyword').keyup(function () {
       var keywords = $(this).val();
       if (keywords == '') { $('#panel-body').hide(); return; };
         $.ajax({
                 type: "post",
                 url: "../Ajax_Handle/xxxxHandler.ashx?action=searchCustomer&keyword=" + $("#keyword").text(),
                 data: $("#payRecordAddform").serialize(),
                 async: false,
                 success: function (data) {
                    if (data.code === 2000) {
                    $("#name").html("");
                    $("#name").append(data.msg);
                    $("#panel-body").show();}
                    else if (data.code == 1039) {
                     layer.msg(data.msg);}
                    else {layer.msg(data.msg);}
                    },
                    error: function () {
                        layer.msg("提交失败！");
                    }
                });
            });
        });