如何使用 HTML5 实现 文本框输入内容后带有模糊匹配的功能。这其实很简单，而且jQuery也为我们提供了相应的插件 Autocomplete.js。这不是一项新技术，百度一搜有很多相关的文章。在这里我就再分享一下如何实现这个功能。
Autocomplete.js 插件地址：/autocomplete/
input 输入模糊提示demo
全部代码如下所示。
<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title> input 模糊匹配功能</title><link rel="stylesheet" href="/ui/1.12.1/themes/base/jquery-ui.css"><link rel="stylesheet" href="/autocomplete/resources/demos/style.css"><script src="/jquery-1.12.4.js"></script><script src="/ui/1.12.1/jquery-ui.js"></script><script>$( function() {var availableTags = ["Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#tags" ).autocomplete({source: availableTags});} );</script></head><body><div class="ui-widget"><label for="tags">输入内容: </label><input id="tags"></div></body></html>
在实际使用中，模糊匹配的词都是从后台查询的。我们这里只需要将source的数据源改为ajax后台查询的结果即可。如下：
<script>$( function() {$( "#tags" ).autocomplete({source: ajaxTags()});} );function ajaxTags(){return $.ajax({url: "url",async: false,data:{tags:$('#tags').val()},dataType:'json'}).responseText;}</script>
