最近在折腾实验室的质量管理系统(LQMS)，在设备管理模块，使用联想输入来直接完成设备名称以及资产号的输入是个比较实用的功能。

最开始我考虑用DropDownList,通过增加option即下拉框的选项来完成输入。

后来想到我用JQuery UI的一个时间选择框来实现时间的输入，那么是否它也有类似的联想输入框呢？找了一下发现还真的有，是Widgets中的一个组件，叫Autocomplete。

我们还是看看要如何使用它吧：

1、引用JQuery UI库，这其实是要包含三个文件，除了UI外，还需要JQuery以及相应的css。

 @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/Scripts/jquery-ui-1.10.4.custom.js")
        @Styles.Render("~/Content/themes/base/jquery-ui.css")
        @Styles.Render("~/Content/themes/base/jquery.ui.autocomplete.css")

2、建立数据源。联想输入下拉菜单中的内容肯定是通过Ajax方式获得的，因此你必须要在页面访问的时候，返回相应的数据。数据的格式可以使用现在比较通用的JSON格式，如果要你自己去写JSON格式，那么你一定会疯掉，好在VS2010经过这些年的发展，JSON格式只是小菜一碟了：

 
 //ajax 获取设备名称
        public JsonResult GetEquip(string SearchName)
        {
            return Json(db.Equipments.Where(E => E.EquipName.Contains(SearchName)).ToList(), JsonRequestBehavior.AllowGet);
            //return Json(db.Equipments.Where(E => E.EquipName.Contains(SearchName)), JsonRequestBehavior.AllowGet);

        }

记得要加入JsonRequestBehavior.AllowGet，否则系统会认为你这没有验证的接口不安全，会报错了。

犹记得那年手动的用php输出xml文档，哎！时代在进步，技术也在进步！

3、编写JS代码来实现联想输入框：

<script type="text/javascript">

    $("#EquipName").autocomplete({

        source: function (request, response) {

            $.ajax({

                url: "http://localhost:3609/Equip/Equipment/GetEquip", //ajax取值  

                type: "get",

                data: { "SearchName": request.term },

                success: function (result) {

                    response($.map(result, function (item) {

                        return { code: item.EquipNum1, name: item.EquipName, label: "(" + item.EquipNum1 + ")" + " " + item.EquipName };

                    }));

                }

            });

        },



        select: function (event, ui) {

            $("#EquipName").val(ui.item.name);
            $("#EquipNum").val(ui.item.code);

            return false;

        },

        autoFocus: true

    });  
</script>

上述的select代表选中后执行的函数，将设备名称和设备代码分别赋值给两个输入框。

效果如下：

自从有了JQuery UI 妈妈再也不用担心我去写大把恶习的js了！

如无特别说明，本博客文章皆为原创。转载请说明，来自吵吵博客。

原文链接：http://chaochaoblog.com/archives/2877

吵吵微信朋友圈，请付款实名加入：