首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

autocomplete插件,自动补全运用

2012-10-30 
autocomplete插件,自动补全使用首先jquery-autocomplete配置:script typetext/javascript src/js/jq

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

热点排行