jquery-ui autocomplete 自动完成功能

最新推荐文章于 2025-09-04 17:39:42 发布

weixin_33769207

最新推荐文章于 2025-09-04 17:39:42 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui json ViewUI

原文链接：http://www.cnblogs.com/ibgo/p/3428087.html

本文介绍了一种在网页开发中为多个文本框快速添加自动完成功能的方法，通过设置属性和使用jQuery简化了操作，并展示了如何在jqGrid中实现相似功能。

效果图

如果想给每个文本框都加上自动完成功能该怎么办呢？一个一个添加太麻烦。可以给文本框设置一个属性，让这个属性的值等于Controller里的action。就像这样：

父项图号：<input id="pn" name="pn" type="text" data-autocomplete="@Url.Action("QuickSearch","BOM")"/>
子项图号：<input id="cn" name="cn" type="text" data-autocomplete="@Url.Action("QuickSearch","BOM")"/>

$(document).ready(function () {
    $(":input[data-autocomplete]").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete"),autoFocus:true });
    });
});

QuickSearch方法如后。

jqGrid的搜索框还是单独做吧。

View

在colModel中给字段加上一个dataInit事件。这样在编辑和查找时都会有自动提示了。

 colModel: [
                {
                    name: 'PNumber', width: 40, index: 'PNumber',
                    editable: true, editrules: { required: true },editoptions:{dataInit:numberAuto},
                    searchoptions: {dataInit:numberAuto, sopt: ['eq', 'cn'] }
                },
                {
                    name: 'CNumber', width: 40, index: 'CNumber',
                    editable: true, editrules: { required: true }, editoptions: { dataInit: numberAuto },
                    searchoptions: {dataInit:numberAuto, sopt: ['eq', 'cn'] }
                }
]

function numberAuto(e) {
    $(e).autocomplete({source:'/BOM/QuickSearch',autoFocus:true,delay:100});
}

Controller:

通过Union查询操作符将2个字段合并(自动去除重复项),然后取出前10条数据。这个action传递给autocomplete里的source属性：autocomplete({source:'/BOM/QuickSearch',autoFocus:true,delay:100})。

　　 　　public ActionResult QuickSearch(string term)
        {
            var q =
                (
                    from p in db.BOM
                    where p.PNumber.Contains(term)
                    select p.PNumber
                )
                .Union
                (
                    from c in db.BOM
                    where c.CNumber.Contains(term)
                    select c.CNumber
                )
                .Take(10);
            return Json(q, JsonRequestBehavior.AllowGet);
        }