项目中有时会用到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 = "";

            p.workNo = "";

            p.CName = "laula 280836";

            p.charName = "李四 40657";

            Pesron p1 = new Pesron();

            p1.Pinyin = "lausi";

            p1.Name = "李四01";

            p1.UserNo = "";

            p1.workNo = "";

            p1.CName = "lausi 280836";

            p1.charName = "李四01 40657";

            Pesron p2 = new Pesron();

            p2.Pinyin = "lisls";

            p2.Name = "李四02";

            p2.UserNo = "";

            p2.workNo = "";

            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;

                }

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

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

  1. ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能

    首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...

  2. jquery.autocomplete修改 实现键盘上下键 自动填充

    根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能. 在网上找了很久没有找到可以实现该功能的插件,无奈只能自己动手改代码.找到js中的KEY.DOWN 和 KE ...

  3. Jquery autocomplete 插件示例

    通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...

  4. jquery autocomplete插件

    jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...

  5. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  6. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  7. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  8. JQuery select,checkbox用法 文本框只能输入数字

    记录一下,方便查找 a.文本框只能输入数字 onkeyup='this.value=this.value.replace(/\D/gi,"")' eg: <input typ ...

  9. Jquery autocomplete插件的使用

    简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

随机推荐

  1. Redis学习笔记之底层数据结构

    1.简单动态字符串(simple dynamic string, SDS) 定义: struct sdshdr {        int len;//记录buf中使用的字节数量        int ...

  2. linux 内核 第二周 操作系统是如何工作的

    姬梦馨 原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一:计算机的三个法宝 存储程序计算机工 ...

  3. 20135337朱荟潼 Linux第一周学习总结——计算机是如何工作的

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC-1000029000 1.冯诺依曼体系结 ...

  4. final 评论 II

    第二次评论内容: 1.Nice!小组的约跑app: 项目内容足够丰富,在展示时也很好的体现了app的功能,可以满足所提出的需求.在展示的过程中表述所占比例较小,希望能够以更多的讲述过程完善用户理解的功 ...

  5. win7下php7.1运行getenv('REMOTE_ADDR')fastcgi停止运行

    // 本地环境phpStudy, PHP7.1.13nts+nginx,切换Apache也不行//ps:php版本<=7.0正常echo "<pre>";// $ ...

  6. c++ std::function

    std::function 是一个模板类,用于封装各种类似于函数这样的对象,例如普通函数,仿函数,匿名函数等等.其强大的多态能力,让其使用只依赖于调用特征.在程序的升级中,可以实现一个调用表,以兼容新 ...

  7. js中的async await

    JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持! 如果开发中使用了babel转码,那么就放心大胆的用吧. ...

  8. 【刷题】BZOJ 1924 [Sdoi2010]所驼门王的宝藏

    Description Input 第一行给出三个正整数 N, R, C. 以下 N 行,每行给出一扇传送门的信息,包含三个正整数xi, yi, Ti,表示该传送门设在位于第 xi行第yi列的藏宝宫室 ...

  9. 【贪心策略】渡河(river)

    “假舟楫者,非能水也,而绝江河.”这句话说的是,借助渡船的人,不是会游水,却能横渡江河. 会游水的人反而不一定能顺利地横渡江河.由于江面风浪很大,他们必须潜泳渡河.这就必须用到氧气瓶.氧气瓶当然是出题 ...

  10. 走楼梯（walk） 解题报告

    走楼梯(walk) 题意 给一个长为\(n(1\le n\le 10^5)\)序列\(\{a\}\),每次从中间挖掉\([l,r]\),然后询问最长上升子序列,强制在线. 有一档分是30000和离线, ...