Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar

有两种用法,一种是直接使用页面的数据,一种是输入请求地址,请求后台返回数据

1.数据格式就是下方这种

    <link href="../autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../lib/jQuery-1.4.4.min.js"></script>
<script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script> <input type="text" value="" id="searchInput" /> <script> var emails = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" },
{ name: "GG Bond", to: "Bond@qq.com" },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
];
$(function(){ $("#searchInput").autocomplete(emails, {
max: 5, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: $("#searchInput").width()+1, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted) {
alert($("#searchInput").width());
});
}); </script>

2.后台传过来的数据格式也可以是上边这种,但是需要重写下parse方法:

[{"bankCode":"111","bankName":"中国工商银行"},{"bankCode":"2","bankName":"中国银行"}]
    $(function(){

        $("#inbankid").autocomplete('<%=request.getContextPath() %>/protected/accountAction.do?m=searchBankName', {
max: 5, //列表里的条目数
minChars: 1, //自动完成激活之前填入的最小字符
width: $("#inbankid").width(), //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
dataType : "json",
parse: function(data){
var rows = [];
var d = data;
for(var i=0; i<d.length; i++){
rows[rows.length] = {
data:d[i],
value:d[i].bankName,
result:d[i].bankName
};
}
return rows;
},
formatItem: function(row, i, max) {
return row.bankName + '[' + row.bankCode + ']';
},
formatMatch: function(row, i, max) {
return row.bankName;
},
formatResult: function(row) {
return row.bankName;
}
}).result(function(event, row, formatted) { });
});

Jquery autocomplete.js输入框联想补全功能的更多相关文章

  1. 联想功能 Jquery autocomplete.js输入框联想补全功能

    转载地址:https://www.cnblogs.com/jinzhiming/p/6768402.html

  2. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  3. jquery autocomplete文本自己主动补全

    文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...

  4. gocode+auto-complete搭建emacs的go语言自动补全功能

    上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...

  5. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  6. 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...

  7. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  9. javascript 实现类似百度联想输入,自动补全功能

    js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...

随机推荐

  1. [django]drf知识点梳理-权限

    用户 - 权限 - 资源 (拥有) (绑定) django权限机制能够约束用户行为,控制页面的显示内容,也能使API更加安全和灵活:用好权限机制,能让系统更加强大和健壮 django权限控制 Djan ...

  2. 【Java】-NO.16.EBook.4.Java.1.008-【疯狂Java讲义第3版 李刚】- 集合/容器

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.008-[疯狂Java讲义第3版 李刚]- 集合 Style:EBook Series:Java Si ...

  3. 【LeetCode每天一题】Add Two Numbers(两链表相加)

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  4. 用iframe嵌入了一个微信公众号平台文章的URL

    JS: $.ajaxPrefilter( function (options) { if (options.crossDomain && jQuery.support.cors) { ...

  5. Boolean数据类型

    boolean 数据类型 boolean 变量存储为 8位(1 个字节)的数值形式,但只能是 True 或是 False,可以把它看做是一个和1代替,并且一定要小写.boolean operate是指 ...

  6. 海量数据找相同数,高配词,不重复的数,判断一个数是否存在,查询串,不同电话号码的个数,中位数,按照query频度排序,topk

    这类题目,首先需要确定可用内存的大小,然后确定数据的大小,由这两个参数就可以确定hash函数应该怎么设置才能保证每个文件的大小都不超过内存的大小,从而可以保证每个小的文件都能被一次性加载到内存中. 1 ...

  7. linux 标准输入输出 重定向

    背景: 屏幕打印不一定都是从标准输出来的,也包括标准错误输出流stderr中的信息 文件描述符定义(系统定义了12个) 0 标准输入 1 标准输出 2 标准错误   0 默认键盘输入 1,2默认从屏幕 ...

  8. iOS 开发笔记-加载/初始化

    ViewDidLoad 一般我们会在这里做界面上的初始化操作,比如往view中添加一些子视图.从数据库或者网络加载模型数据装配到子视图中 在自定义控制里 initWithFrame:一般用于添加控件, ...

  9. node.js初识06

    node中的fs文件系统 var http = require("http"); var fs = require("fs"); var server = ht ...

  10. 通过Referer设置来防盗链

    在Servlet中需要设置防盗链功能时可以通过以下代码: String referer = request.getHeader("Referer"); if(referer == ...