github:
https://github.com/Pixabay/jQuery-autoComplete/blob/master/demo.html
官网demo
https://goodies.pixabay.com/jquery/auto-complete/demo.html
cdn:
<script src='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js'></script> <link href='//cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css' rel='stylesheet'>
我的demo:
参数1:term 为 文本框输入的内容
参数2:suggest 是一个核心函数,将字符串数组添加到自动完成的列表中
$(function() { $('#exampleInputAmount').autoComplete({ minChars: 1, source: function(term, suggest){ term = term.toLowerCase(); var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML']; var suggestions = []; for (i=0;i<choices.length;i++) if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]); suggest(suggestions); } }); })
远程获取数据
1、term 为 文本框输入的内容
2、q为$_GET参数
3、这里回调的data已经通过JSON.parse处理过可以直接使用了
$('#exampleInputAmount').autoComplete({ minChars: 1, source: function(term, suggest) { term = term.toLowerCase(); $.getJSON('?type=autoComplete', { q:term }, function(data){ //console.log(JSON.stringify(data)); console.log(data); }); } });