之前为了实现这个功能花了我几天的时间。
事实上。实现了之后发现也就那么回事,正所谓万事开头难嘛。。
废话不多说了。这里我使用的是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>