项目中有时会用到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. PAT甲题题解-1073. Scientific Notation (20)-字符串处理

    题意:给出科学计数法的格式的数字A,要求输出普通数字表示法,所有有效位都被保留,包括末尾的0. 分两种情况,一种E+,一种E-.具体情况具体分析╮(╯_╰)╭ #include <iostrea ...

  2. 接上 操作系统java项目设计图纸 一步一步在进化

  3. 第一次冲刺阶段后五天总结和第一次 Sprint

    第一次冲刺阶段后五天总结(11.16-11.20) 一.准备实现的功能 1 在游戏中随机显示式子 点击进入答题则进入答题界面,显示式子 2 设置限时或者规定答题数目模式 进入游戏,选择不同模式 3 产 ...

  4. week6：个人博客作业

    这周主要是参与团队编程的讨论 团队编程中发现很多问题: 1,每个人共同空闲的时间不好找 就我组来说,我是考研,每天晚上都要去外面上课,有的人在进行大创,,也有的像我一样在整考研的东西,还有的进行其他, ...

  5. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  6. Mysql学习实践---SELECT INTO的替代方案

    从一个表复制数据,然后把数据插入到另一个新表中. 假设有一个已创建且有数据的orders表,要把orders表备份到还未创建的newOrders表里 SQL用法:SELECT * INTO newOr ...

  7. 【设计模式】—— 观察者模式Observer

    前言:[模式总览]——————————by xingoo 模式意图 观察者模式,也叫发布/订阅模式,从名字来说就能察觉到它的过程应该是,发布——其他人接受. 这个模式定义了对象之间的一种依赖关系,当一 ...

  8. oracle11g的安装

    1. 解压缩已经下载好的文件,两个文件一起解压,如图所示 2. 到解压路径当中找到setup.exe文件 3.安装的第一步,配置安全更新,如果不希望接收安全更新邮件可以选择将下方的复选框勾选去除 4. ...

  9. BZOJ4559 JLOI2016成绩比较（容斥原理+组合数学+斯特林数）

    容斥一发改为计算至少碾压k人的情况数量,这样对于每门课就可以分开考虑再相乘了.剩下的问题是给出某人的排名和分数的值域,求方案数.枚举出现了几种不同的分数,再枚举被给出的人的分数排第几,算一个类似斯特林 ...

  10. MT【113】无中生有加一个减一个

    代数上可以这么解答:不妨设$x\le y$ 1)若$y-x\le\frac{1}{2},则|f(x)-f(y)|<\frac{1}{2}|x-y|\le\frac{1}{4}$ 2)若$y-x& ...