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

转载于:https://www.cnblogs.com/mafeifan/p/3288734.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值