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