项目中有时会用到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. MyBatis3-动态SQL语句

    MyBatis的动态SQL语句是基于OGNL表达式的.可以方便的在SQL语句中实现某些逻辑,总体说来MyBatis动态SQL语句主要有以下几类: 1.if语句(简单的条件判断). 2.choose(w ...

  2. 【Beta阶段】第一次Scrum Meeting！

    本次会议为第一次Scrum Meeting会议~ 会议时长:20分 会议地点:依旧是7公寓1楼会客室   昨日任务一览 明日任务一览 刘乾 预定任务:(未完成)#128 学习如何在Github上自动构 ...

  3. Daily Scrum - 12/03

    Meeting Minutes   后端基本完成,结束当前Sprint, 开始下一个Sprint.进一步讨论了UI,并完成了任务分配.   Burndown     Progress   part 组 ...

  4. tp5+layui 实现上传大文件

    前言: 之前所写的文件上传类通常进行考虑的是文件的类型.大小是否符合要求条件.当上传大文件时就要考虑到php的配置和服务器的配置问题.之前简单的觉得只要将php.ini中的表单上传的 大小,单脚本执行 ...

  5. du 显示 前面以及或者两级的目录大小的方法

    mark 一下 du -h --max-depth=

  6. 使用spring单元调试出错initializationError

    1.引入spring jar包之后,单元测试一直出错,提示initializationError. 2.在网上看说是junit版本的问题,引入其他版本之后,还是不对. 3.最后发现是需要引入 这两个j ...

  7. C#小技巧

    1.将字符串转换成大写ToUpper string a="zxc"; a.ToUpper()  输出结果ZXC; a.ToUpper().Contains("Z" ...

  8. Simple Cycles Edges CodeForces - 962F（点双连通分量）

    题意: 求出简单环的所有边,简单环即为边在一个环内 解析: 求出点双连通分量,如果一个连通分量的点数和边数相等,则为一个简单环 点双连通分量  任意两个点都至少存在两条点不重复的路径  即任意两条边都 ...

  9. Day24-Ajax操作、图片验证码、KindEditor使用-转

    参考源:http://blog.csdn.net/fgf00/article/details/54917439 三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是 ...

  10. 【洛谷】NOIP2018原创模拟赛DAY1解题报告

    点此进入比赛 T1:小凯的数字 题意:给定q个l,r,求l(l+1)(l+2)...(r-1)r模9的结果 很显然,这是道考验数(运)学(气)的题目 结论:输出\((l+r)*(r-l+1)\over ...