前段时间一直想试下写个异步查询的功能来练习下ajax，于是，在一个小项目中，将一个文件的搜索功能做成像百度那个样子（当然，不可能做到好像百度一样强大），为此，也找了不少资料和别人的例子（不过没有一个让我完全满意的），于是，在参考别人的代码的基础上，自己写了一个，其基本原理是利用jQuery实现Ajax异步查询，后台则是利用模糊查询来获取结果，最后传给前台来显示，html网页代码（里面含有boostrap的样式）如下：
<form id="searchBar" action="${ctx}/File/getKeywordFile.html" method="post" class="form-inline" role="form"><div style="margin:0px auto; margin-bottom: 10px;max-width:1000px;"><div id="search"><input type="text" name="keyword" id="keyword" class="input form-control" autocomplete="off" placeholder="请输入文件名"><button type="submit" class="btn btn-default">搜索</button></div><div id="searchSuggest"><ul></ul></div></div></form>
下面三是jQuery异步查询的代码：
function autoCom() {var searchKey;var searchType;searchKey = $("form#searchBar input.input").val();//searchType = $("div#multipleselect a").attr("class");if (searchKey) {$.get("/Management/File/search.html", {keyword: searchKey}, function(data, textStatus) {var listLength;var currentList = -1;$("#searchSuggest ul").html(data);listLength = $("#searchSuggest ul li").length;if (listLength >= 1) {$("#searchSuggest").show();} else {$("#searchSuggest").hide();}$("#searchSuggest ul li").hover(function() {$("#searchSuggest ul li").removeClass();$(this).addClass("lihover");currentList = $("#searchSuggest ul li").index(this);}, function() {$(this).addClass("lihover");}).click(function() {var keywordContent;keywordContent = $(this).text();$("form#searchBar input.input").val(keywordContent);$("#searchSuggest").hide();$("form#searchBar").submit();});$(document).keyup(function(event) {event = event || window.event;//监听上方向键if (event.keyCode === 38) {if (currentList < 1) {currentList = listLength - 1;$("#searchSuggest ul li").css('background-color', ''); //先清除样式 避免冲突$("#searchSuggest ul li").eq(currentList).css('background-color', '#EEF');var keywordContent = $("#searchSuggest ul li").eq(currentList).text();$("form#searchBar input.input").val(keywordContent);} else {currentList--;$("#searchSuggest ul li").css('background-color', '');$("#searchSuggest ul li").eq(currentList).css('background-color', '#EEF');var keywordContent = $("#searchSuggest ul li").eq(currentList).text();$("form#searchBar input.input").val(keywordContent);}}//监听下方向键if (event.keyCode === 40) {if (currentList < (listLength - 1)) {currentList++;$("#searchSuggest ul li").css('background-color', '');$("#searchSuggest ul li").eq(currentList).css('background-color', '#EEF');var keywordContent = $("#searchSuggest ul li").eq(currentList).text();$("form#searchBar input.input").val(keywordContent);} else {currentList = 0;$("#searchSuggest ul li").css('background-color', '');$("#searchSuggest ul li").eq(currentList).css('background-color', '#EEF');var keywordContent = $("#searchSuggest ul li").eq(currentList).text();$("form#searchBar input.input").val(keywordContent);}}});});$("body").click(function() {$("#searchSuggest").hide();});} else {$("#searchSuggest").hide();}}$("form#searchBar input.input").keyup(function() {if ((event.keyCode !== 38) && (event.keyCode !== 40) && (event.keyCode !== 13)) {autoCom();}});
下面是搜索框的CSS：
#searchBar{margin-top:10%;text-align: center;}.lihover:hover{cursor: pointer;background: #eeF;}#id{display:inline;width:250px;}#keyword{width:250px;}ul{margin-left:346px;margin-top:-2px;border:1px solid #ccc;list-style:none;width:250px;padding:0px;}li{text-align: left;line-height:30px;font-size:14px;height: 30px;padding: 0px 6px;}.form-control{border-radius: 0px;}.my{margin-left:346px;margin-top:-2px;border:1px solid #ccc;list-style:none;width:250px;padding:0px;}
实现的效果如下：
