首先jquery-autocomplete配置:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
?<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
?<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
?
?
<script type="text/javascript">
? jQuery(document).ready(function(){
?var schoolarr = new Array();//定义缓存数组
??? //Ajax获得数据。获得json,这里是用了getJSON方法来的
??? jQuery.getJSON("${baseUrl}/edu3/frame/getAllSchool.html",
??????? function(data){
???????? for( var d in data ) {
?????????? var arr1 = new Array();???????? ?????????
???????? ?arr1.push(data[d].value);
??????????? arr1.push(data[d].name);
??????????? arr1.push(data[d].key);
??????????? schoolarr.push(arr1);
???????? }
????????????? jQuery("#brSchoolName").autocomplete
(schoolarr,{ //使用自动填充
//设置自动填充
各个属性如下:
????????? autoFill: true,
?????????? formatItem: function(row, i, max) {
?????????????? return row[1];
?????????? },
????????? // 返回当前input的值
?????????? formatResult: function(row) {
?????????????? return row[1];
?????????? },
?????????? matchSubset:1,
?????????? matchContains:1,
?????????? cacheLength:10 ??
?????? });??
??????
?????? jQuery("#brSchoolName").result(function(event, data, formatted) {
????if (data)
????jQuery("#brSchoolId").val(data[0]);//这里的data是一个匹配到的json,这里设置了隐藏域的value值
??});???????????????
????? });
</script>
?
jsp页面:
?隐藏域(绑定了输入框中自动补全的数据的id,以供传递到服务器端)
:<input type="hidden" id="brSchoolId
" name="branchSchool" size="36" value="${branchSchool}"/>?
??? 自动补全的输入框
:<input type="text" id="brSchoolName
" name="branchSchoolName" size="24" value="${branchSchoolName}"/>