注意使用的是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 点击或进入默认显示所有结果的更多相关文章

  1. DEDECMS点击主栏目默认显示第一个子栏目列表的方法

    本文实例讲述了DEDECMS点击主栏目默认显示第一个子栏目列表的方法.分享给大家供大家参考.具体分析如下: 今天公司有个需求是,点击导航上的父栏目进去默认显示第一个子栏目的列表,以下是具体实现方法,可 ...

  2. jQuery点击收缩展开滑动显示内容竖直手风琴代码

    <div class="position"> <div class="positiontop"> <span class=&quo ...

  3. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  4. jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  5. 请问:关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题

    要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...

  6. vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  7. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  8. (原)python中matplot中获得鼠标点击的位置及显示灰度图像

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6182474.html 参考网址: http://matplotlib.org/examples/pyl ...

  9. [转]设置MS Office Word for mac的默认显示比例

    由于mac os的分辨率比较大,在PC上显示正常的word文档(显示比例100%),在mac下打开会很小,需要经常调整显示比例,如调到125%.130%或150%,可以通过下面方法来设置默认显示比例, ...

随机推荐

  1. 使用 JDK XML 和 java对象相互转换

    Unmarshaller 类能将 XML 数据转换为 Java 内容对象. Marshaller 类能够将 Java 对象转换回 XML 数据. package jaxb; /** * Created ...

  2. 请求是如何传递给StandardEngine的?

    将请求的传递过程分解学习. CoyoteAdapter将中持有Connector的引用,所以在Coyote这个类中Connector查找它所属的StandardService,而StandardSer ...

  3. 使用libcurl下载文件小例

    libcurl是一个很强大的开源网络处理库,支持包括HTTP.HTTPS.FTP……一系列网络协议.用它来进行HTTP的get\post 或者下载文件更是小菜一碟,chrome内核都用到了它,本文主要 ...

  4. UglifyJS 压缩选项

    UglifyJS 压缩选项 1.使用逗号运算符连接简单语句 2.使用点符号代替中括号属性     foo [“bar”]→foo.bar 3.删除逻辑上走不到的代码 4.删除调试代码    debug ...

  5. Impossible WHERE noticed after reading const tables

    阿里云反馈的慢SQL,执行计划返回如下:Impossible WHERE noticed after reading const tables sql很简单: SELECT * FROM deposi ...

  6. 『ACM C++』 PTA 天梯赛练习集L1 | 052-053

    今日刷题,水题水题 ------------------------------------------------L1-052------------------------------------ ...

  7. GIT更新一其中一个提交版本

    有一小朋友刚才SVN转到GIT,最近老是咨询怎么才svn update -rXXXXX 在git其实也不麻烦,就是git checkout的事情,不管是分支还是TAG,都会有一个HASH版本号 1. ...

  8. MySQL 5.7基于GTID的主从复制

            since i've broken down the replication enviornment by "reset master;" yesterday.th ...

  9. PHP的抽象类和抽象方法以及接口总结

    PHP中的抽象类和抽象方法自己用的不多,但是经常会在项目中看到别人使用,同样,今天在看别人的代码的时候,发现使用了抽象类,就总结下: 抽象类:1.如果一个类中有一个方法是抽象方法,则这个类就是抽象类: ...

  10. 一道关于js正则表达式的面试题

    这道面试题明显是要用到正则表达式来解决的,由于太久没有写正则表达式了,一时之间竟然写不出来,所以记录一下笔记,下面直接上代码: function parseUrl(str) { // 判断是否传入参数 ...