当前位置: 代码迷 >> Web前端 >> autocomplete插件,自动补全运用
  详细解决方案

autocomplete插件,自动补全运用

热度:46   发布时间:2012-10-30 16:13:36.0
autocomplete插件,自动补全使用

首先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}"/>

  相关解决方案