jQuery 关键字搜索（自动完成效果，autocomplete）

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

有一个选择客户的下拉框，当客户比较多时（大概有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对象。

题外：

你可以在我做的一个项目上看到各种jQuery操作。 欢迎大家前往查看指正。项目名：9平米管理软件 www.eorders.cn  点击“查看演示”按钮进入。

如果您觉得这个软件有点实用价值，帮忙推荐给您的朋友们哦， 谢谢~ （在“系统设置->模板设置”页面，也可以看到各种常见的jQuery操作）