jquery-ui autocomplete 自动完成功能

效果图

如果想给每个文本框都加上自动完成功能该怎么办呢？一个一个添加太麻烦。可以给文本框设置一个属性，让这个属性的值等于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',  40, index: 'PNumber',
                    editable: true, editrules: { required: true },editoptions:{dataInit:numberAuto},
                    searchoptions: {dataInit:numberAuto, sopt: ['eq', 'cn'] }
                },
                {
                    name: 'CNumber',  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);
        }

--END--