注意使用的是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

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>DevBridge Autocomplete Demo</title>
  5.         <link href="content/styles.css" rel="stylesheet" />
  6.     <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
  7.     <script type="text/javascript" src="src/jquery.autocomplete.js"></script>
  8. </head>
  9. <body>
  10.        <input type="text" name="country2" id="autocomplete-dynamic" />
  11.         <input type="text" name="country" id="country" />
  12.         <script>
  13.         $(function(){
  14.             //var countries = [ { value: 'Andorra', data: 'AD' },{ value: 'Zimbabwe', data: 'ZZ' } ];
  15.             $('#country').autocomplete({
  16.                 serviceUrl : 'aaa.php',
  17.                 // lookup: countries,
  18.                 minChars : 0,
  19.                 onSelect : function (suggestion) {
  20.                     console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
  21.                     $('#country').val(suggestion.value);
  22.                 },
  23.             });        
  24.  
  25.             //tab into后显示所有结果
  26.             $('#country').on('focus', function (){
  27.                 $(this).autocomplete().onValueChange();
  28.             });    
  29.  
  30.         });
  31.         </script>
  32. </body>
  33. </html>

php

  1. <?php
  2. $get = $_GET['query'] ;
  3. $arr = array ('query'=>$_GET['query'] ,'suggestions'=>array("11","22","33"));
  4. echo json_encode($arr);
  5. ?>

另外如果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. BZOJ 3680: 吊打XXX （模拟退火）

    //yy:今天简单入门学了下ORZ 爬山算法:兔子朝着比现在高的地方跳去.它找到了不远处的最高山峰.但是这座山不一定是珠穆朗玛峰.这就是爬山算法,它不能保证局部最优值就是全局最优值. 模拟退火:兔子喝 ...

  2. AWESOME SWIFT-swift.libhunt.com-swift类库网站

    https://swift.libhunt.com/categories/688-events 29 Events libraries and projects ORDERED BY POPULARI ...

  3. luogu P2617 Dynamic Rankings(分块，n <= 1e4)

    嘟嘟嘟 带修改区间第k大. 然而某谷把数据扩大到了1e5,所以用分块现在只能得50分. 分块怎么做呢?很暴力的. 基本思想还是块内有序,块外暴力统计. 对于修改,直接重排修改的数所在块,时间复杂度O( ...

  4. php-------面向对象详解

    php面向对象详解 面向对象 对象概念是面向对象技术的核心.在显示世界里我们所面对的事情都是对象,如计算机.电视机.自行车等.在面向对象的程序设计中,对象是一个由信息及对信息进行处理的描述所组成的整体 ...

  5. react系列（四）Redux基本概念和使用

    Redux基本概念和使用 先从Flux开始 先放一个Flux官网的链接.需要fq. Flux是Facebook提出的一种构建客户端网页应用的应用架构,它是一种抽象程度很高的设计模式,鼓励单向数据流. ...

  6. 《Linux 学习》01---redis安装, 并使用Redis Desktop Manager 连接

    一.环境简介: linux 系统:centos 7.X 二.安装大纲: 1.下载安装包 2.安装 3.统一管理redis 配置文件 4.编辑redis配置文件,设置常用的功能 5.(1)命令启动,连接 ...

  7. 【oracle笔记3】多表查询

    *多表查询 分类:1.合并结果集 2.连接查询 3.子查询 *合并结果集:要求被合并的表中,列的类型和列数相同. *UNION,去除重复行.完全相同的行会被去除 *UNION ALL:不去除重复行. ...

  8. iOS之改变UIAlertViewController字体的颜色

    NSString *message = @"请确认信息是否正确?"; NSString *title = @"提示"; UIAlertController *a ...

  9. [开源]JSON文本格式化工具(简码万能助手开源扩展程序)

    现在的网站大多都是使用json进行API式前后端数据交互, 有时抓包得到的是一串没格式化的JSON文本, 不太方便分析, 所以我自行写了个开源扩展程序, 可以方便地格式化JSON文本.   当然,你也 ...

  10. axios api封装

    import axios from 'axios'; import qs from 'qs'; const host = 'url' axios.defaults.baseURL = host; // ...