文档章节

autocomplete.jquery 点击或进入默认显示所有结果

SnowFlake
 SnowFlake
发布于 2016/06/20 16:14
字数 353
阅读 288
收藏 0

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

本文转载自:http://www.cnblogs.com/mafeifan/p/3288734.html

SnowFlake
粉丝 9
博文 171
码字总数 0
作品 0
郑州
程序员
私信 提问
MATLAB标定ZED双目摄像头

MATLAB标定ZED双目摄像头步骤 Matlab version:2017b Matlab标定双目摄像头三步走: 图像采集 单目相机标定 双目相机标定 图像采集 利用Matlab对棋盘格进行图像采集,图片数量在15~25之间。采...

caidaoqing
2018/05/17
0
0
Linux中iptraf命令详解(IP局域网监控工具)

Linux中iptraf命令详解(IP局域网监控工具) 发布时间:2017-12-27 20:46:03 作者:佚名 我要评论 iptraf命令可以实时地监视网卡流量,可以生成网络协议数据包信息、以太网信息、网络节点状态和...

linjin200
2018/12/24
40
0
loadrunner analysis graph settings

分析标题图的处理方法: 1.修改默认配置:   Analysis可以修改各种图标的默认配置,使之符合分析的各种需要。 1.1 修改全局过滤选项   Analysis打开运行结果后,点击工具栏中的“Set Glo...

jeffsui
2015/11/18
80
0
24.win7(windows 7)系统下安装SQL2005(SQL Server 2005)...

由于工作需要,今天要在电脑上安装SQL Server 2005。以往的项目都是使用Oracle,MS的数据库还真的没怎么用过,安装Oracle已经轻车熟路,但装SQL Server好像还有点小麻烦,所以记录下来,以留...

quanpower
2013/06/05
90
0
社交系统ThinkSNS+第4阶段H5端研发更新发布播报

社交系统ThinkSNS+第4阶段于5月15日更新发布,本次社交系统TS+发布类型:移动端优化,新增功能发布,以下为部分内容,详情如下: 一、优化、调整与修复 以下为本期已记录的部分内容 H5端更新...

ThinkSNS账号
2018/05/23
23
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部