JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）

之前为了实现这个功能花了我几天的时间。

事实上。实现了之后发现也就那么回事，正所谓万事开头难嘛。。

废话不多说了。这里我使用的是JQuery控件库中的一个Autocomplete控件。即Autocomplete.js，所以首先你要做的就是到JQuery的官网下载这个Autocomplete控件。由于jquery-ui.js中已经包括了Autocomplete.js,所以在html或者.jsp文件里直接引用jquery-ui.js就ok了。下载地址http://jqueryui.com/download/。然后。就是要从后台获取数据和控件的数据源进行绑定。即将获取到的数据赋值给控件的数据属性source（source的数据格式是数组形式。）这样就能实现你想要的功能了。详细的实现代码例如以下。仅供參考，如有不正确的地方请多多不吝赐教。

<pre name="code" class="html"><pre name="code" class="html"><link type="text/css" rel="stylesheet" href=css/jquery-ui.css>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../jquery-ui.js"></script>

/*获取后台数据的详细实现。这里採用的是$.ajax*/var userName = "zhangsan"; var nameList = []; function getRoleList() { $.ajax({ url:"findUser.action", type:"Post", dataType:"json", error:function(){alert("error");}, success:function (data) { $.each(data, function
(i, item) { nameList.push(item.userName); }); $("#userName1").autocomplete({ source:nameList }); } }); }; $(function(){ getRoleList(); //获取后台数据 var name = ''; if (name == null || name == "") $("#userName").val(""); else $("#userName").val(name); });</script>