注意使用的是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. docker-3-常用命令（中）

    容器命令 1.有镜像才能创建容器,这是根本前提(下载一个CentOS镜像演示) docker pull centos 2.新建并启动容器 docker run [OPTIONS] IMAGE [COM ...

  2. mime中间件

    mime中间件Demo,里面用到的有 1.path模块 //引入模块 var path=require('path'); 2.extname方法 //获取文件的扩展名 var extname=path ...

  3. Learning by doing——获黄色领骑衫之感

    获奖感言 能拿到这件黄色的领骑衫,心里真的非常高兴.仔细看了一下,扣子.领子.各种图案各种细节十分精致.可以说这件领骑衫既有纪念意义,又有实用意义,真的很棒. 背后的故事 其实开始接触博客的时候,我是 ...

  4. Linux 文件系统 的 学习

    学习参考大神:http://www.cnblogs.com/yyyyy5101/articles/1901842.html  总结:简介 http://linux.chinaunix.net/tech ...

  5. ARM 汇编指令集 特点之一：条件执行后缀

    mov r0,r1; moveq r0,r1;//这句代码是否执行 取决于 上几句代码 的运行结果(最后一次CPSR 寄存器 的 高四位   NZCV 的标志位) 条件后缀执行特点:1.条件后缀执行是 ...

  6. C# 类中的静态字段始终继承自基类

    我们试想一下现在有一个类Parent,它有一个static的int类型字段number,然后如果类Parent有三个子类Child01.Child02和Child03,那么改变Parent.numbe ...

  7. 打印iframe某区域

    <a href="#" onClick="parent.iframe名字.focus();window.print();">打印</a>

  8. JS异步编程 (2) - Promise、Generator、async/await

    JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...

  9. NAT和DHCP

    涉及的命令 NAT 动态NAT清除:clear ip nat translation * 进入路由器环回接口:int loo 0 静态NAT清除: (config)#No ip nat inside ...

  10. ios下引用MUI后input不能输入，Android端正常

    原因是mui框架的有个css样式 *{ -webkit-user-select: none; } 其作用是禁掉用户可以选中页面中的内容. 添加以下style样式即可 input{ -webkit-us ...