zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    jenkins
    k8s 驱逐限制
    jenkins+k8s 实现持续集成
    镜像更新备份
    【工具分享】2020年4月 phpstorm2020.1 for mac
    【排坑】mac安装homebrew会遇到的各种问题解决方案
    记一次C盘扩容
    2018夏季工作台之再设计
    left join后面加上where条件浅析
    编程随想篇(2018夏)
  • 原文地址:https://www.cnblogs.com/mafeifan/p/3288734.html
Copyright © 2011-2022 走看看