项目中有时会用到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. SimpleDateFormat的一些常用用法

    /** SimpleDateFormat函数语法: G 年代标志符 y 年 M 月 d 日 h 时 在上午或下午 (1~12) H 时 在一天中 (0~23) m 分 s 秒 S 毫秒 E 星期 D ...

  2. 2017-2018 第一学期201623班《程序设计与数据结构》-第9&10周作业问题总结

    一.作业内容 第8周作业 http://www.cnblogs.com/rocedu/p/7484252.html#WEEK08 第9周作业 http://www.cnblogs.com/rocedu ...

  3. 哥java学识有大进 干回之前的小学生系统像切菜一样简单 不说了 来代码

    package runok; import java.util.*; import java.awt.*; import java.awt.event.ActionEvent; import java ...

  4. 在 Ubuntu16.04 中搭建 Spark 单机开发环境 (JDK + Scala + Spark)

    1.准备 本文主要讲述如何在Ubuntu 16.04 中搭建 Spark 2.11 单机开发环境,主要分为 3 部分:JDK 安装,Scala 安装和 Spark 安装. JDK 1.8:jdk-8u ...

  5. 学习Java并发的课程

    https://www.javaspecialists.eu/courses/concurrency.jsp http://www.jconcurrent.com/ javaConcurrentAni ...

  6. Django如何安装指定版本

      Django默认安装最新版本:pip install django Django后面接版本号就可以了:pip install django==1.11.7 如果使用pip install安装库比较 ...

  7. RocketMQ 事务消息

    RocketMQ 事务消息在实现上充分利用了 RocketMQ 本身机制,在实现零依赖的基础上,同样实现了高性能.可扩展.全异步等一系列特性. 在具体实现上,RocketMQ 通过使用 Half To ...

  8. SpringBoot 1.快速搭建一个 SpringBoot Maven工程

    一.新建一个Maven工程 (1)选择创建简单MAVNE工程 (2)输入你自己的MAVEN工程的Group Id(必填).Artifact Id(必填).Version(必填).Packaging(必 ...

  9. .net mvc ajax 上传文件

    1.前端 <div> <input type="file" id="upfile" /> <button type="b ...

  10. bzoj1214 [HNOI2004]FTP服务器

    题目挺复杂的. 但有一点好,就是这题没数据,交个空程序就好了. begin end.