jquery-autocomplete初体验

浏览数：35 / 时间：2015年06月09日

前端代码

   // 引用JS
<script src="~/Content/artDialog/lib/jquery-1.10.2.js"></script>
    <script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>
    <script src="~/Content/jquery-autocomplete/jquery.autocomplete.js"></script>
    <script src="~/Content/jquery-autocomplete/demo/localdata.js"></script>

    <link href="~/Content/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" />

JS调用代码

   //JS调用 
<script type="text/javascript">
        $(function () {

            $.getJSON("/Home/Seach", function (msg) {
                $(".suggest13").autocomplete(msg, {
                    minChars: 0,
                    multiple:true,//多查询
                    formatItem: function (row, i, max) {
                        return i + "/" + max + ": \"" + row.Pinyin + "\" [" + row.CName + "]" + "\" [" + row.charName + "]";
                    },
                    formatMatch: function (row, i, max) {
                        return row.Pinyin, row.UserNo;
                    },
                        formatResult: function (row) {
                            return row.CName;
                        }
                });
            });

        });
    </script>

Html代码

//Html代码
<body>
    <p>
        <label>Single City (local):</label>
        <input type="text" id="suggest13" class="suggest13" />
    </p>

</body>

后端数据源

        public ActionResult Seach()
        {
            List<Pesron> list = new List<Pesron>();
            Pesron p = new Pesron();
            p.Pinyin = "laula";
            p.Name = "李四";
            p.UserNo = "280836";          
            p.workNo = "40657";
            p.CName = "laula 280836";
            p.charName = "李四 40657";

            Pesron p1 = new Pesron();
            p1.Pinyin = "lausi";
            p1.Name = "李四01";
            p1.UserNo = "280836";           
            p1.workNo = "40657";
            p1.CName = "lausi 280836";
            p1.charName = "李四01 40657";

            Pesron p2 = new Pesron();
            p2.Pinyin = "lisls";
            p2.Name = "李四02";
            p2.UserNo = "280836";          
            p2.workNo = "40657";
            p2.CName = "lisls 280836";
            p2.charName = "李四02 40657";
            
            list.Add(p);
            list.Add(p1);
            list.Add(p2);

            return Json(list, JsonRequestBehavior.AllowGet);
           
        }

        public class Pesron
        {
            public string Pinyin { get; set; }
            public string Name { get; set; }
            public string UserNo { get; set; }         
            public string workNo { get; set; }
            public string CName { get; set; }
            public string charName { get; set; }
        }