基於ajax、jquery、js製作的智慧搜尋框的
一、製作隱藏的搜尋框（包括css）
.autoSearch {
width: 148px;
max-height: 540px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #999;
z-index: 9999; /*設定物件的層疊順序 */
}
.autoSearch ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.autoSearch ul li {
padding: 3px;
font-size: 14px;
list-style: 20px;
cursor: pointer;
}
.autoSearch ul li:hover {
background-color: #e5e5e5;
}
<div class="autoSearch" id="autoSearchForm" style="dispaly: none">
<ul id="searchResult"></ul>
</div>
二、資料庫與jsp頁面的互動
//智慧搜尋功能
$("#resource1").bind(
"keyup",
function() {
var searchText = $("#resource1").val();
$.ajax({
type : "post",
url : "/json/alarm/listResource.json",
data : "searchText=" + searchText,
success : function(data) {
var html = "";
for (var i = 0; i < data.returnList.length; i++) {
html += '<li class="result">' + data.returnList[i] + "</li>";
}
$("#searchResult").html(html);
$("#autoSearchForm").show().css(
{
top : $("#resource1").offset().top + $("#resource1").height() + 2,
left : $("#resource1").offset().left,
position : "absolute"
});
}
});
});
//點選後智慧搜尋框隱藏
$(document).bind("click", function() {
$("#autoSearchForm").hide();
});
//點選搜尋
$(document).delegate("result", "click", function() {
var name = $(this).text();
$('#resource1').val(name);
});
@RequestMapping(value = "listResource")
@ResponseBody
public AjaxMessageBean listResource(@RequestParam(required = false) String searchText){
System.out.println("!~~~~~~~~~~~~~~~~~~~~~~~~~~~~`");
System.out.println(searchText);
List<String> resourceNameList = alarmService.listResource(searchText);
System.out.println(resourceNameList.size());
AjaxMessageBean bean = new AjaxMessageBean();
bean.setReturnList(resourceNameList);
return bean;
}
AjaxMessageBean類中裝好查詢結果（List）已json形式返回到ajax中