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', 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);

        }

 

--END--