jquery.autocomplete的使用-----------------------摘抄别人的
作者:lxhwss | 2011/10/11 9:46:38 | 阅读43次
document.write(”<script language=javascript src=’/js/2.js’><\/script>”);
当一个启动了自动填充功能的输入框得到焦点或者被输入值的时候,插件搜索匹配的选项并显示出来供用户选择。当输入更多的值的时候,可以得到更好的匹配结果。
这项功能可以用来输入刚刚选择的值,例如标签;或者输入一个地址、邮编,抑或从地址本里面输入邮件地址。
本地或者远程的数据都可作为自动填充的数据:当数据集较小的时候用本地数据比较好,例如具有50条数据左右的地址本;当数据量比较大的时候就需要远程数据了,比如要要从具有成千上万条的数据库中选择的时候。
下面就根据官方的文档一步一步地说明jqueryautocomplete插件的用法:
官方文档的下载地址为:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
jQuery官方api地址:http://docs.jquery.com/Plugins/Autocomplete
(一)本地数据
解压之后在jquery-autocomplete /demo/localdata.js定义了3个数组,months,emails和cities,用来演示本地数据的自动填充。
函数签名:
autocomplete( url or data, [options])
利用这个函数可以让一个输入框或者文本域是可以自动填充的。
第一个参数可以是一个远程数据的URL,也可以是本地数组。对于远程数据:当用户输入数据的时候,一个请求被发送到指定的后台程序(比如"my_autocomplete_backend.php"),此请求包含两个get参数,一个名为“q”值为输入框的内容,一个为名为“limit”,值为配置选项中max的值。
如果输入的内容是foo,将会得到这样一个URL:
my_autocomplete_backend.php?q=foo&limit=10
结果必须一行返回一个值,结果的顺序将和后台返回的数据的顺序保持一致。
第二个参数是配置autocomplete的选项,参数形式为键值对,所有的选项都是可选的。
1.自动填充本地数据,没有配置选项
首先来看最简单的autocomplete,来看文档例子的第一段:
<form autocomplete="off">
<p>
<label>Single City (local):</label>
<input type="text" />
</p>
</form>
我们来看对应的js:
$().ready(function(){
$("#suggest1").focus().autocomplete(cities);
});
其中cities被定义为["Aberdeen","Ada", "Adamsville",…]类型的数组。如此当往id为suggest1的输入框输入内容的时候,cities中的内容就会被过滤,匹配的内容显示在下方供选择。这里autocomplete只有一个参数,就是本地的数组。
2.自动填充本地数据,有配置选项
带配置项的autocomplete,看文档例子的第二段(这里省去的外面的form):
<p>
<label>Month(local):</label>
<inputtype="text" />
</p>
看对应的js:
$().ready(function(){
$("#month").autocomplete(months,{
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i,total) {
// don't show thecurrent month in the list of values (for whatever reason)
if ( data[0] ==months[new Date().getMonth()] )
returnfalse;
return data[0];
}
});});
首先来看months的定义:
var months =['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December'];
然后看配置选项:
1)minChars (Number):在触发autoComplete前用户至少需要输入的字符数.Default: 1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表
2)max (Number):autoComplete下拉显示项目的个数.Default: 10,由于月份只有12个,这里定义为12。
3)autoFill (Boolean):要不要在用户选择时自动将用户当前鼠标所在的值填入到输框.Default: false
4)mustMatch (Booolean): 如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
5)matchContains (Boolean): 决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
6)scrollHeight (Number): 自动完成提示的卷轴高度用像素大小表示 Default: 180
7)formatItem (Function): 为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供4个参数(row, i, max,value): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数,最后一个是查询到的项. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
这样就很容易可以看懂第二段了。
3.自动填充本地数据,格式化显示和结果
配置项复杂的autocomplete,看文档例子的第三段:
<p>
<label>E-Mail(local):</label>
<input type="text" />
<input type="button"value="Get Value" />
</p>
对应的js:
$("#email").autocomplete(emails,{
minChars:0,
width:310,
matchContains:"word",
autoFill:false,
formatItem:function(row, i, max) {
returni + "/" + max + ": \"" + row.name + "\"[" + row.to + "]";
},
formatMatch:function(row, i, max) {
returnrow.name + " " + row.to;
},
formatResult:function(row) {
returnrow.to;
}
});
首先来看emails的定义:
var emails = [
{ name: "PeterPan", to: "peter@pan.de" },
{ name:"Molly", to: "molly@yahoo.com" },
{ name: "ForneriaMarconi", 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: "DonCorleone", to: "don@vegas.com" },
{ name: "McChick", to: "info@donalds.org" },
{ name: "DonnieDarko", to: "dd@timeshift.info" },
{ name: "QuakeThe Net", to: "webmaster@quakenet.org" },
{ name: "Dr.Write", to: "write@writable.com" }
];
emails的定义稍微复杂一些,可以看做数组的数组。
然后看配置选项:
1)前2个选项和前面基本相同, matchContains的配置和前面不同,这里的配置为“word”,即为true,表示可以是包含关系。autoFill为false表示不自动把鼠标所在的行填充到输入框。
2)formatItem对返回结果的每一行做了处理。每一行都被处理成了这样的一种形式:i/max:”name”[to],例如第一个被表示成:1/10: "Peter Pan"[ peter@pan.de]
3)formatMatch对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值和formatItem的参数一样。
4)formatResult和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default:none,表示要么是只有数据,要么是使用formatItem提供的值.
4.自动填充本地数据,多项选择,用分隔符分隔
<p>
<label>Tags(local):</label>
<inputtype="text" />
</p>
对应js:
$("#tags").autocomplete(["c++","java", "php", "coldfusion","javascript", "asp", "ruby", "python","c", "scala", "groovy", "haskell","pearl"], {
width:320,
max:4,
highlight:false,
multiple:true,
multipleSeparator:" ",
scroll:true,
scrollHeight:300
});
配置选项很简单,就是多了一个多项选择和分隔符。
5.自动填充本地数据,弹出层(thickbox)
<p>
<ahref="http://xianfengmc.blog.163.com/blog/#TB_inline?height=155&width=400&inline" target="_blank" rel="nofollow">
</p>
<divdisplay: none;">
<p>
<label>E-Mail(local):</label>
<inputtype="text" />
<inputtype="button" value="Get Value" />
</p>
</div>
对应js:
$("#thickboxEmail").autocomplete(emails,{
minChars:0,
width:310,
matchContains:true,
highlightItem:false,
formatItem:function(row, i, max, term) {
returnrow.name.replace(new RegExp("(" + term + ")","gi"), "<strong>$1</strong>") +"<br><span style='font-size: 80%;'>Email: <" +row.to + "></span>";
},
formatResult:function(row) {
returnrow.to;
}
});
当点击链接的时候弹出层,可以在弹出层中调用autocomplete。
(二)远程数据6.自动填充远程数据,配置简单
从第四段开始就是取远程数据了,看第四段的html:
<p>
<label>SingleBird (remote):</label>
<inputtype="text" />
</p>
对应的js:
$("#singleBirdRemote").autocomplete("search.php",{
width:260,
selectFirst:false
});
由于远程取的是php文件,所以我首先搭建了一个php环境,用的是Apache的http服务器,不会搭建的话随便百度一下。我是用的百度文库里的一片文章,如果你懒的话就用这个地址吧http://wenku.baidu.com/view/ddc083c24028915f804dc2ff.html。
首先让我们来看看search.php,里面都做了什么。
search.php文件的一开始:
<?php
$q = strtolower($_GET["q"]);
if (!$q) return;
用$_GET()方法获取get参数q,如果q为空则直接返回。然后定义了一个键值对的数据:
$items = array(
"Great<em>Bittern</em>"=>"Botaurus stellaris",
"Little<em>Grebe</em>"=>"Tachybaptus ruficollis",
"Black-neckedGrebe"=>"Podiceps nigricollis",...);
文件的最后:
foreach ($items as $key=>$value) {
if(strpos(strtolower($key), $q) !== false) {
echo"$key|$value\n";
}
}
?>
foreach循环数组里所有的元素,如果“键”里边包含所输入的值(查询的时候都把字母转化为了小写),则输出到页面。
其次,让我们分析一下js:
autocomplete函数第一个参数是一个url:search.php,刚才已经分析过search.php文件,search.php把删选出来的数据返回给autocomplete用作自动填充的选项。第二个参数是配置选项,这里只给出了两个选项:第一个width不必多说,第二个selectFirst: selectFirst (Boolean):如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
7.自动填充远程数据,关键字包含,多项选择
之所以放在一块儿看,是因为这两段比较象,只是看不同的配置:
<p>
<label>SingleCity (contains):</label>
<inputtype="text" />
</p>
<p>
<label>MultipleCities (local):</label>
<textarea cols='40' rows='3'></textarea>
</p>
对应的js:
$("#suggest14").autocomplete(cities,{
matchContains:true,
minChars:0
});
$("#suggest3").autocomplete(cities,{
multiple:true,
mustMatch:true,
autoFill:true
});
第六段的配置其实上边已经讲述,第七段多了一个配置选项multiple: multiple (Boolean): 是否允许输入多个值即多次使用autoComplete以输入多个值.Default: false.
8.自动填充远程数据,用函数格式化显示和结果
<p>
<label>MultipleBirds (remote):</label>
<textarea style="">对应的js:
$("#suggest4").autocomplete('search.php',{
width:300,
multiple:true,
matchContains:true,
formatItem:formatItem,
formatResult:formatResult
});
取远程数据search.php,不过把formatItem和formatResult分别指定了一个函数,这次我们需要看的只是这两个函数:
function formatItem(row) {
returnrow[0] + " (<strong>id: " + row[1] +"</strong>)";
}
function formatResult(row) {
returnrow[0].replace(/(<.+?>)/gi, '');
}
formatItem函数对每一行进行了格式化,formatResult函数去掉了其中的一些字符,如此而已。
9.自动填充远程数据,列表中显示图片
<p>
<label>Imagesearch (remote):</label>
<inputtype="text" />
</p>
对应的js:
$("#imageSearch").autocomplete("images.php",{
width:320,
max:4,
highlight:false,
scroll:true,
scrollHeight:300,
formatItem:function(data, i, n, value) {
return "<img src="http://xianfengmc.blog.163.com/blog/images/" rel="nofollow"/>
},
formatResult:function(data, value) {
return value.split(".")[0];
}
});
这次autocomplete函数请求的时候一个远程数据images.php,来看看images.php做了什么:
<?php
$term = $_REQUEST['q'];
$images =array_slice(scandir("images"), 2);
foreach($images as $value) {
if(strpos(strtolower($value), $term) === 0 ) {
echo$value . "\n";
}
}
?>
首先利用$_REQUEST得到参数q,赋值给$item,然后扫描images目录,返回文件名数组,并分隔数组,然后去搜索文件名,如果包含输入的值则返回文件名。
formatItem函数首先根据查询到的文件名显示图片,然后输入文件名。
formatResult只是显示文件名。
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//用ajax请求后台数据
$.ajax({ type: "get", contentType: "application/json", url: "test.aspx", success: function(data) {
var arr = data.split("|");//以|为分界线 将字符串转换为数组
$("#txtNameCn").autocomplete(arr);
} });
// $("#txtNameCn").autocomplete(arr);
});
</script>
////////////////////////////////////////////////////////////////////
用json对象实现autocomplete功能
后台
返回json对象 [{ "NameCn": "莫西", "NameEn": "GLORY MERCY", "IMO": "9486568" }, { "NameCn": "东方606", "NameEn": "dongfang606", "IMO": "1061"}]
因为jquery将json对象识别为字符串,可以用eval()方法转换
在利用javascript内置的eval函数,将json格式的字符串转换成JS对象时,需要用一对"()"先将该字符串包住.
前台
<script>
$(document).ready(function() {
$.ajax({
type: "get",
contentType: "application/json",
url: "returndata.aspx",
success: function(data) {
var data = eval("("+data+")");
$("#txtNameCn").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.NameCn;
},
formatMatch: function(row, i, max) {
return row.NameCn;
},
formatResult: function(row) {
return row.NameCn;
}
});
$("#txtNameEn").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.NameEn;
},
formatMatch: function(row, i, max) {
return row.NameEn;
},
formatResult: function(row) {
return row.NameEn;
}
});
$("#txtIMO").autocomplete(data, {
minChars: 1,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.IMO;
},
formatMatch: function(row, i, max) {
return row.IMO;
},
formatResult: function(row) {
return row.IMO;
}
});
}
})
})
</script>
jquery.autocomplete的使用-----------------------摘抄别人的的更多相关文章
- 一场由股票提醒助手插件引发的血案——浅入浅出 jquery autocomplete
我没有学过前端,所以这篇文章注定要班门弄斧了. 通常,须要用到什么技术什么语言时,我才去学,学了也不一定掌握,就是记不住!所以如今明确了.学习的时候,亦或是攻克难点的时候,一定要记录下来.并不一定非要 ...
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- jquery.autocomplete 模糊查询 支持分组
//demo <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <lin ...
- 使用jQuery Autocomplete(自动完成)插件
jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...
- jquery autocomplete实现读取sql数据库自动补全TextBox
转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...
- Bootstrap Typeahead/Jquery autocomplete自动补全
使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...
- [Jquery] Jquery AutoComplete的使用方法实例
jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
随机推荐
- 最大比例 公约数复用 【蓝桥真题】 (c++)
最大比例 X星球的某个大奖赛设了M级奖励.每个级别的奖金是一个正整数.并且,相邻的两个级别间的比例是个固定值.也就是说:所有级别的奖金数构成了一个等比数列.比如:16,24,36,54其等比值为:3/ ...
- Springboot中,Tomcat启动war包的流程
将一个SpringBoot项目,打成war包 <!-- 1. 修改POM依赖 --> <dependency> <groupId>org.springframewo ...
- 【Linux网络基础】网络子网划分基础知识(IP地址,子网)
一. IP地址分类与子网划分基础 1. 什么是IP地址? 常见的ip地址版本为ipv4, ipv6 32位 4 * 8=32位. 32位二进制数字序列组成的数字序列 点分十进制 采用点将32位数字 ...
- 【Linux常见命令】touch命令
touch - change file timestamps touch [文件名] 就是“摸”一下文件,如果文件不存在,就建立新文件:如果文件存在,就改变文件的访问时间atime等时间戳信息. 语法 ...
- javaScript常用到的方法
判断一个对象是否为空对象,不为null,仅仅是{};可以使用如下方法判断: if (JSON.stringify(object) === '{}') { //.. } //也可以 if (Object ...
- Mysql 查看被锁住的表
MYSQL 查看被锁住的表 -- 本文章仅用于学习,记录 当你在mysql 执行查询语句的时候,简单的一句查询语句却卡很久,一直转圈圈的时候,这时候你就需要怀疑数据库的哪些进程,哪些事物被锁住 ...
- 全网最简单明了的MySQL连接Eclipse方法(JDBC详细安装方式及简单操作)2020新版
Step 1 你得有Eclipse 没有出门右拐,我教不了你. Step 2 你得有Mysql MySQL的详细安装过程,我在另一篇博客中给出.戳我 Step 3 安装JDBC 可以去官网下,如果用的 ...
- .NET Core 反编译dll源码查看
一.可以通过JetBrains dotPeek进行反编译 二.可以通过.NET Reflector和VS自带的反编译工具查看
- requests抓取数据示例
1:获取豆瓣电影名称及评分 # 抓取豆瓣电影名称及评分 url="https://movie.douban.com/j/search_subjects" start=input(& ...
- 经过踩坑,搭建成功的Appium自动化测试环境
因为最近本人准备搞app自动化,所以就搭建环境过程记录下来(主要踩过好几个坑) 期间有点烦躁,后面调整了下心态还是成功弄好了. 一.Appium环境搭建准备软件 所需要到的软件如下: 1.安装JDK1 ...