jQuery.ui autoComplete使用
官网 http://api.jqueryui.com/autocomplete/#option-source
参考了 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html 写的很好 大家去看看
首先要说明的是 如果在网上直接搜索 autocomplete 的话 会得到很多不同的插件
比如这个页面http://www.open-open.com/ajax/AutoComplete.htm 相同功能的插件有3页
我这里用的时 jQuery.ui 下的一个补全插件
下面用三种方式获取
一种是静态数据 一种是远程的写好的静态json格式数据 还有一种是后台根据输入的不同数据返回不同的值
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body> <div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div> <div class="ui-wight">
<label for="jsonp">rakusTag</label>
<input id="jsonp"/> 下面有指定参数 输入的字符最小是2个才开始传送数据
</div> <script type="text/javascript">
$(function(){
$("#jsonp").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(data) {
response($.map(data.geonames, function(item) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
});
});
</script> <div class="ui-wight">
<label for="find_group_ac">rakusTag</label>
<input id="find_group_ac"/>
</div> <script type="text/javascript">
$(function(){
$("#find_group_ac").autocomplete({
source: function(request, response) {
$.ajax({
url: "autocomplete.php",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
response($.map(data.items, function(item) {
return {
label: item.name,
value: item.name
}
}));
}
});
},
minLength: 1
});
});
</script>
</body>
</html>
后台
<?php
$val=$_REQUEST['term'];
$ret="";
function StartsWith($Haystack, $Needle){
return strpos($Haystack, $Needle) === 0;
} if(StartsWith($val,'a')){
$ret="{\"items\":[{\"name\":\"ACC\",\"description\":\"desc\"},{\"name\":\"acm\",\"description\":\"desc\"},{\"name\":\"array\",\"description\":\"desc\"}]}";
if(strpos($val,'ac')!==false){
// echo 'ac';
$ret="{\"items\":[{\"name\":\"ACC\",\"description\":\"desc\"},{\"name\":\"acm\",\"description\":\"desc\"}]}";
if(strpos($val,'acc')!==false){
// echo 'acc';
$ret="{\"items\":[{\"name\":\"ACCR\",\"description\":\"desc\"},{\"name\":\"according\",\"description\":\"desc\"}]}";
}
}
}else if(StartsWith($val,'b')){
$ret="{\"items\":[{\"name\":\"base\",\"description\":\"desc\"},{\"name\":\"bonni\",\"description\":\"desc\"},{\"name\":\"boot\",\"description\":\"desc\"}]}";
}else if(StartsWith($val,'c')){
$ret="{\"items\":[{\"name\":\"candy\",\"description\":\"desc\"},{\"name\":\"clone\",\"description\":\"desc\"},{\"name\":\"crocs\",\"description\":\"desc\"}]}";
}else {
$ret="";
}
echo $ret;
?>
最后送一个 检查json数据 是否正确的工具 http://jsonlint.com/
jQuery.ui autoComplete使用的更多相关文章
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- 可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
- jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList
0.引言 1.起因 一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...
随机推荐
- 提高你的Java代码质量吧：使用构造函数协助描述枚举项
一.分析 一般来说,我们经常使用的枚举项只有一个属性,即排序号,其默认值是从0.1.2... ....但是除了排序号外,枚举还有一个(或多个)属性. 二.场景 比如,可以通过枚举构造函数声明业务值,定 ...
- 什么时候css会见less
在一定程度上,css不能被视为一个节目.虽然和其他语言,它有自己的规范.编码,但它的笨拙实在让我失望. 不喜欢css是由于不管怎么优化代码.项目大到一定程序后.都会看上去一团乱.并且有时候一个bug的 ...
- javascript 工作必知(四) 类型转换
string和number boolean javascript 类型会根据赋值的进行转成相应的类型. var str = ""; alert(typeof (str));//st ...
- Ubuntu的快捷键
正如大家都知道的那样,Ubuntu的终端的Terminal能快捷的操作该linux系统,减少鼠标的使用.(vim党,尽量避免使用鼠标) 在Ubuntu中,终端的快捷键为(大小写无关的): Ctrl + ...
- 50句高级SQL语句
一个题目涉及到的50个Sql语句 --(下面表的结构以给出,自己在数据库中建立表.并且添加相应的数据,数据要全面些. 其中Student表中,SId为学生的ID) ------------------ ...
- 高效的数组去重(js)
function uniqueArray(data){ data = data || []; var a = {}; for (var i=0; i<data.length; i++) { va ...
- The c programming language第一章节所有程序的实现
//打印第一个程序hello, word #include<stdio.h> int main() { printf("hello, world\n"); ; } // ...
- Linux 查看支持的语言，日期，时间，计算器
1.查看系统目前支持的语言 echo %LANG 2.查看日历 cal 3.查看日期时间 date 4.计算器 bc
- 基于纯Java代码的Spring容器和Web容器零配置的思考和实现（3） - 使用配置
经过<基于纯Java代码的Spring容器和Web容器零配置的思考和实现(1) - 数据源与事务管理>和<基于纯Java代码的Spring容器和Web容器零配置的思考和实现(2) - ...
- JavaEE Tutorials (14) - 用实体图创建获取计划
14.1实体图基础185 14.1.1默认实体图186 14.1.2在持久化操作中使用实体图18614.2使用命名实体图187 14.2.1对实体类应用命名实体图注解187 14.2.2从命名实体图获 ...