使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题
项目中有时会用到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输入中文问题的更多相关文章
- ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/ 第一步是点击这里 第二步选择你想要下载的主题进行下载 我这里是选择的cupertino主题包 点击圆圈 ...
- jquery.autocomplete修改 实现键盘上下键 自动填充
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能. 在网上找了很久没有找到可以实现该功能的插件,无奈只能自己动手改代码.找到js中的KEY.DOWN 和 KE ...
- Jquery autocomplete 插件示例
通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...
- JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
- JQuery select,checkbox用法 文本框只能输入数字
记录一下,方便查找 a.文本框只能输入数字 onkeyup='this.value=this.value.replace(/\D/gi,"")' eg: <input typ ...
- Jquery autocomplete插件的使用
简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
随机推荐
- CSAPP lab2 二进制拆弹 binary bombs phase_2
给出对应于7个阶段的7篇博客 phase_1 https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2 https://www.cnblogs. ...
- 20135327郭皓——Linux内核分析第二周 操作系统是如何工作的
操作系统是如何工作的 上章重点回顾: 计算机是如何工作的?(总结)——三个法宝 存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的 ...
- ElasticSearch5.6.1 + 中文分词(IK)
在安装ElasticSearch 需要先安装java 的 jdk 可以通过 命令来确认是否已经安装了 java -version 如果没有安装可以使用 yum 直接安装通过. 先通过命令查看yum源 ...
- everything 提供http和ftp的功能
1. 早上起床看知乎,发现everything 有http和ftp的功能, 简单看了一下的确很强大.. 就是有点危险.. 功能位置. 2. 最下面有FTP和HTTP 可以进行启用 这是http的 建议 ...
- Restful api 防止重复提交
当前很多网站是前后分离的,前端(android,iso,h5)通过restful API 调用 后端服务器,这就存在一个问题,对于创建操作,比如购买某个商品,如果由于某种原因,手抖,控件bug,网络错 ...
- 在laravel中,使用DB查询数据库后,返回的对象,可以用下面的办法变为数组
$nodes = Db::table('account')->orderBy('sort', 'asc')->orderBy('id' ,'asc')->get()->map( ...
- 获取移动端 touchend 事件中真正触摸点下方的元素
移动端的touchstart, touchmove, touchend三个事件,拖动元素结束时,获取到了touchend事件, 但是event.touches[0].target所指向的元素却是tou ...
- c/c++ 函数说明以及技巧总结
1. memset函数: void *memset(void *s, int ch, size_t n); 函数解释:将s中当前位置后面的n个字节 (typedef unsigned int size ...
- 界面编程之QT的线程20180731
/*******************************************************************************************/ 一.为什么需 ...
- 前端常用功能记录(三)—datatables表格初始化
其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解.下面记录的是datatables常用的功能的初始化. 数据源 我经常使用的有两种,一种是JavaScript ...