基于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中