WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

jQuery 关键字搜索(自动完成效果,autocomplete)

更新时间:2021-02-16 21:43 作者:serven-star点击:

最近做一个项目时碰到一个需求:

有一个选择客户的下拉框,当客户比较多时(大概有100个左右),选择起来很费劲。开始是准备在下拉框旁边再加一个搜索按钮,当用户点击时弹出一个新窗口,用户输入关键字再进行搜索。但是后来一想,这种方案操作起来用户体验不是很好。于是就有了下面这个东西:

其中,“四方快递”为客户名,“SFKD”为客户的快速索引号,这个索引号是在录入客户时填写的。

说明:

我采用的是ASP.NET MVC4,其项目自带jQuery UI的js库jquery-ui-1.8.20.js。

 

前台页面:

@Html.DropDownList("sc", new SelectList(Model.DdlCustomer, "ItemValue", "ItemText"))
                &nbsp;<input type="text" placeholder="快速搜索" style="width: 100px" id="txtCustomer" />

(这个是MVC4的写法,其它语言的写法大同小异。请确保所有客户都已绑定到下拉框)

 

js:

 

$(function () {

    $.ajax({
        url: "/Order/GetAutoCompleteCustomer",
        type: 'GET',
        cache: false,
        dataType: 'json',
        async: false, // 此处用的是同步加载数据,因为只有数据加载完成才能进行下面的操作;当然用异步也行,不过后续操作也写到回调函数中,效果一样
        success: function (result) {
            for (var i in result.data) {
                // label为客户名, value为客户编号;对应select option的text和value
                allCustomer.push({ label: result.data[i].ItemText, value: result.data[i].ItemValue });
            }
        },
        error: function (e) {
        }
    });

 

    try {
        $('#txtCustomer').autocomplete({
            source: allCustomer, // 数据源,由上面的ajax请求从后台获取
            select: function (a, b, c) {
                $("#sc").val(b.item.value); // 选择了某一个客户时,触发该事件。设置select的选中项
            },
            close: function (envent, ui) {
                $('#txtCustomer').val(""); // 关闭autocomplete层时触发。清除搜索框的文本(当然不清除也行,看你的需要了)
            }
        });
    }
    catch (e) {
    }

 

});

 

后台的获取数据的函数就忽略,返回的是一个MVC的JsonResult对象。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容