这几天一直搞开发,
动态提示:确定肯定是Ajax,想用存Ajax感觉工程浩大。于是想到了jQuery。想到了jQuery插件。废话少说。详细介绍autocomplete.
下载:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 地址有可能改变。大家baidu 搜索 jquery autocomplete 下载。
配置:解压缩后吧整个文件夹放入eclipse的项目中。
导入样式根据自己的实际情况 <link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css " />
导入库文件,这里也是根据自己的实际情况,注意(在导入库文件之前应该导入jQuery库文件,注意顺序)<script type="text/javascript" src="jquery-autocomplete/jquery-ui-all-min-lastest.js"></script >
<script type="text/javascript" srcjquery-autocomplete/jquery.autocomplete.min.js"></script >
使用:既然是动态提示! 就是输入内容以后触发Ajax到前台匹配。
jsp页面:
<input type="text" id="searchName" name="searchName" />
js: var cityList;
var options = {
minChars: 1,//从第几个开始匹配
max: 10,//显示匹配的个数
width: 448,//宽度
matchContains: true,//支持中文匹配
formatItem: function(row, rowNum, rowCount, searchItem)//匹配条显示的格式化
{
if(row.hospitalname==undefined)
{
return row.text ;
}
else
return row.text+"-"+row.hospitalname+"-"+row.officename ;
},
formatMatch: function(row, rowNum, rowCount)//按照什么匹配
{
return row.userid + " " + row.text;
},
formatResult: function(row, rowNum, rowCount)//格式化结果
{
return row.text;
}
};
$(function()
{
$("#searchname").bind("click",getSearch);
});
function getSearch(event)//当点击时候执行函数
{
$.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",
{
searchName:$("#searchname").val(),//配置参数
d:new Date()//防止缓存
},
function(data){//回调函数
var cityList = data.beans;//我在后台自己组织的json数据data.beans返回的是一个jsonArray。
$('div[class="ac_results"]').remove();//防止多次添加!每次先清空div。通过firefox 可能看到
$("#searchname").autocomplete(cityList, options);//自动匹配
$("#searchname").result(function(event, row, formatted)//选择匹配项执行函数
{
$("#textuserid").val(row.userid);//这里说明吧id保存一个hidden中。
});
}
)
}
通过这几步就可能实现了! 大家可以看看效果。注意后台组织数据! json。相信大家肯定成功。
相信大家实现了以后肯定有这样的疑问,匹配一个文本框就要写一个!这样通用性不强!下面写一下可以匹配多个的!做到jQuery 的宗旨,write less do more。
js:
function getSearch1(docName,searchAsName)
{
$(function(){
var searchname="#"+docName.id;
var searchas=searchAsName;
var cityList;
var options = {
minChars: 1,
max: 10,
width: 448,
matchContains: true,
formatItem: function(row, rowNum, rowCount, searchItem)
{
if(row.hospitalname==undefined)
{
return row.text ;
}
else
return row.text+"-"+row.hospitalname+"-"+row.officename ;
},
formatMatch: function(row, rowNum, rowCount)
{
return row.userid + " " + row.text;
},
formatResult: function(row, rowNum, rowCount)
{
return row.text;
}
};
$(function()
{
$(searchname).bind("click",getSearch);
});
function getSearch(event)
{
$.getJSON("/YHTWeb/userSearch.do?method=getUserSearchTitleListAjax",
{
searchAs:searchas,
searchName:$(searchname).val(),
d:new Date()
},
function(data){
var cityList = data.beans;
$('div[class="ac_results"]').remove();
$(searchname).autocomplete(cityList, options);
$(searchname).result(function(event, row, formatted)
{
$("#textuserid").val(row.userid);
});
}
)
}
})
}
jsp:<input type="text" id="searchName" name="searchName" size="60" style="border:0;" οnclick="getSearch1(this,$('#searchAs').val() )"/>//第一个参数是哪个控件实现,第二个是相当于event后台处理。
今天好累! 格式排版写的不好! 大家将就的看吧!
QQ:214644119