autocomplete.jquery 点击或进入默认显示所有结果
注意使用的是autocomplete.jquery,官网地址是:https://github.com/devbridge/jQuery-Autocomplete。而不是JqueryUI的autocomplete
when I click or tab into the input filed, I want to display all result below
现在需求是当我点击文本框或用tab键进入不输入任何内容,自动显示所有的结果。
其实这个需求并不是非常好,如果备选数据在本地会好些,autocomplete.jquery提供有这个选项,lookup: [ 'first', 'second', 'third' ]
如果需要ajax请求去数据库抓取,可能会更频繁的查询数据库。
既然要实现也有办法的,答案是问了作者才知道。
这个是演示地址:http://jsfiddle.net/PSJTQ/1/ 或 http://runjs.cn/detail/xpeazasi
如果数据是通过后台获取,我写了个小例子,autocomplete.jquery版本是1.2.7
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevBridge Autocomplete Demo</title>
<link href="content/styles.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>
</head>
<body>
<input type="text" name="country2" id="autocomplete-dynamic" />
<input type="text" name="country" id="country" />
<script>
$(function(){
//var countries = [ { value: 'Andorra', data: 'AD' },{ value: 'Zimbabwe', data: 'ZZ' } ];
$('#country').autocomplete({
serviceUrl : 'aaa.php',
// lookup: countries,
minChars : 0,
onSelect : function (suggestion) {
console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
$('#country').val(suggestion.value);
},
}); //tab into后显示所有结果
$('#country').on('focus', function (){
$(this).autocomplete().onValueChange();
}); });
</script>
</body>
</html>
php
<?php
$get = $_GET['query'] ;
$arr = array ('query'=>$_GET['query'] ,'suggestions'=>array("11","22","33"));
echo json_encode($arr);
?>
另外如果jQueryUI的autocomplete有类似的需求可以试试这个。 http://runjs.cn/detail/zbvlkuzc
autocomplete.jquery 点击或进入默认显示所有结果的更多相关文章
- DEDECMS点击主栏目默认显示第一个子栏目列表的方法
本文实例讲述了DEDECMS点击主栏目默认显示第一个子栏目列表的方法.分享给大家供大家参考.具体分析如下: 今天公司有个需求是,点击导航上的父栏目进去默认显示第一个子栏目的列表,以下是具体实现方法,可 ...
- jQuery点击收缩展开滑动显示内容竖直手风琴代码
<div class="position"> <div class="positiontop"> <span class=&quo ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- 请问:关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题
要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...
- vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)
效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的 这个方法里传递的index 对应 isShow 数组里的index ,对 ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- (原)python中matplot中获得鼠标点击的位置及显示灰度图像
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6182474.html 参考网址: http://matplotlib.org/examples/pyl ...
- [转]设置MS Office Word for mac的默认显示比例
由于mac os的分辨率比较大,在PC上显示正常的word文档(显示比例100%),在mac下打开会很小,需要经常调整显示比例,如调到125%.130%或150%,可以通过下面方法来设置默认显示比例, ...
随机推荐
- 使用 JDK XML 和 java对象相互转换
Unmarshaller 类能将 XML 数据转换为 Java 内容对象. Marshaller 类能够将 Java 对象转换回 XML 数据. package jaxb; /** * Created ...
- 请求是如何传递给StandardEngine的?
将请求的传递过程分解学习. CoyoteAdapter将中持有Connector的引用,所以在Coyote这个类中Connector查找它所属的StandardService,而StandardSer ...
- 使用libcurl下载文件小例
libcurl是一个很强大的开源网络处理库,支持包括HTTP.HTTPS.FTP……一系列网络协议.用它来进行HTTP的get\post 或者下载文件更是小菜一碟,chrome内核都用到了它,本文主要 ...
- UglifyJS 压缩选项
UglifyJS 压缩选项 1.使用逗号运算符连接简单语句 2.使用点符号代替中括号属性 foo [“bar”]→foo.bar 3.删除逻辑上走不到的代码 4.删除调试代码 debug ...
- Impossible WHERE noticed after reading const tables
阿里云反馈的慢SQL,执行计划返回如下:Impossible WHERE noticed after reading const tables sql很简单: SELECT * FROM deposi ...
- 『ACM C++』 PTA 天梯赛练习集L1 | 052-053
今日刷题,水题水题 ------------------------------------------------L1-052------------------------------------ ...
- GIT更新一其中一个提交版本
有一小朋友刚才SVN转到GIT,最近老是咨询怎么才svn update -rXXXXX 在git其实也不麻烦,就是git checkout的事情,不管是分支还是TAG,都会有一个HASH版本号 1. ...
- MySQL 5.7基于GTID的主从复制
since i've broken down the replication enviornment by "reset master;" yesterday.th ...
- PHP的抽象类和抽象方法以及接口总结
PHP中的抽象类和抽象方法自己用的不多,但是经常会在项目中看到别人使用,同样,今天在看别人的代码的时候,发现使用了抽象类,就总结下: 抽象类:1.如果一个类中有一个方法是抽象方法,则这个类就是抽象类: ...
- 一道关于js正则表达式的面试题
这道面试题明显是要用到正则表达式来解决的,由于太久没有写正则表达式了,一时之间竟然写不出来,所以记录一下笔记,下面直接上代码: function parseUrl(str) { // 判断是否传入参数 ...