使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

项目中有时会用到ajax自动补全查询，就像Google的搜索框中那样，输入汉字或者字母的首个字母，则包含这个汉字或者字母的相关条目会显示出来供用户选择，该插件就是实现这样的功能的。autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）。

下面代码演示Demo

前端代码 主要引用JS文件

   // 引用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调用代码   此处采用GetJSON的方式  实际是验证本地数据返回的JSON  如果是远程验证对返回的JSON格式有一定要求

   //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>　　

后端数据源  验证本地数据时的Json格式  

 //验证本地数据时的Json格式      
 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; }
        }

显示效果  

 这样就实现了 文本框 自动联想填充了  具体使用手册可以看http://www.cnblogs.com/amoniyibeizi/p/4449162.html

 

解决兼容IE问题  修改后的源码

//重写parse方法 放在formatResult方法之后
                parse: function (data) {
                    var parsed = [];
                    var rows = data.split("\n");
                    for (var i=0; i < data.length; i++) {
                        var item = {};
                        item.Data = data[i];
                        item.value = data[i][0];
                        item.result = this.formatResult && this.formatResult(data[i], data[i][0]) || data[i][0];
                        parsed.push(item);
                    }
                    return parsed;
                    
                }

 https://files.cnblogs.com/files/amoniyibeizi/autocomplete.rar  修改后源码 下载链接

posted on 2015-04-23 01:40  Amoni  阅读(896)  评论(0)    收藏  举报

导航