• 使用 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("
    ");
                        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  修改后源码 下载链接

  • 相关阅读:
    spring security使用数据库管理用户权限
    ubuntu安装配置jdk tomcat mysql ...
    64位虚拟机安装64位ubuntu出现问题
    maven pom文件结构详解
    Maven3下的java web项目
    数据库分页和使用jstl标签替换分页的jsp代码
    servlet生命周期
    图片校验码的生成
    HttpSessionListener和HttpSessionBindingListener监听session的销毁
    perl 处理特殊字符
  • 原文地址:https://www.cnblogs.com/amoniyibeizi/p/4449172.html
Copyright © 2020-2023  润新知