项目中有时会用到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. 一个http请求发送到后端的详细过程

    我们来看当我们在浏览器输入http://www.mycompany.com:8080/mydir/index.html,幕后所发生的一切. 首先http是一个应用层的协议,在这个层的协议,只是一种通讯 ...

  2. 12.23daily_scrum

    今天大家的工作重心在调试过程中,以便及时地发现和解决在调试过程中出现的问题和漏洞,悬浮窗测试工作也已经展开,主要集中在边缘设计代码的测试部分,具体工作如下: 具体工作: 小组成员 今日任务 明日任务 ...

  3. 《Linux内核分析》第一周——计算机是如何工作的？

    杨舒雯 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 课程内容 1.诺曼依体系 ...

  4. Eclipse导入包提示Setting build path has encountered a problem

    Eclipse无法导入jar包时, 提示:“Setting build path” has encountered a problem,Could not write file D:\\workspa ...

  5. 基于 Java Web 的毕业设计选题管理平台--系统设计和任务分配

    一.团队作业:http://www.yzhiliao.com/course/70/task/440/show 二.个人作业: 1.项目的代码托管 (1).GitHub 地址:https://githu ...

  6. 作业C#程序分析

    阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...

  7. [2017BUAA软工]结对项目-数独程序扩展

    零.github地址 GitHub地址:https://github.com/Liu-SD/SudoCmd (这个地址是命令行模式数独的仓库,包含了用作测试的BIN.DLL核心计算模块地址是:http ...

  8. es6 对象的扩展

    一.现在还有很多浏览器不能直接使用es6语法.特别是手机端的一些低版本的浏览器.都需要用bale转换一下. 但是目前流行的框架中(vue,react,angular).都有自己的脚手架,都能用webp ...

  9. bootstrap响应式布局列子

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  10. 跨语言通信方案的比较—Thrift、Protobuf和Avro

    Thrift由Facebook开源的一个RPC框架,用来进行可扩展且跨语言的服务的开发,使得各种编程语言间无缝结合的.高效的服务.我们依据Thrift的规范 简单定义访问接口,通过Thrift编译器编 ...