搜索框实现自动补齐功能

html部分

<div class="search searchPlace">
<input class="searchPlace" id="SearchName" onkeyup="SearchName(event)" type="text" placeholder="输入查找的接口关键字" value=""/>
<a class="clickAimg" onclick="SearchLikeName()"><img src="<%=path %>/images/search.png" /></a>
<div class="searchTips hidden">
<ul id="searchTips">
</ul>
</div>
</div>

js部分

var query = getParameter("name");
if(query!="" && query!=null){
document.getElementById("SearchName").value = query;
}
$(".searchTips ul li").on("click", function() {
var text = $(this).text();
document.getElementById("SearchName").value = text;
$(".searchTips").hide();
});
$(".chacha").on("click", function() {
document.getElementById("SearchName").value="";
});
var selectedItem = null;
var setSelectedItem = function(item) {
if (item === null) {
$(".searchTips").hide();
} else if (item < 0) {
selectedItem = 0;
} else if (item >= $(".searchTips ul li").length) {
selectedItem = $(".searchTips ul li").length - 1;
} else {
selectedItem = item;
}
$(".searchTips ul li").eq(selectedItem).addClass("selectedItem").siblings("li").removeClass("selectedItem");
$("#SearchName").val($(".searchTips ul li").eq(selectedItem).text());
};
function SearchName(){
var event = window.event || arguments.callee.caller.arguments[0];
if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
$("#searchTips").empty();
var text = document.getElementById("SearchName").value;
var name = encodeURIComponent(text);
if (name != "") {
$.ajax({
type: "POST",
url: SSlocalhostPaht + "/api/getInterface",
data: {
name: name
},
success: function(data) {
//console.log(data);
var html = "";
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
html += '<li class="searchPlace"><a target="_blank" href="' + SSlocalhostPaht + '/interfaceInfo/interfaceDetails/' + data[i].interfaceId + '">' + data[i].interfaceName + '</a></li>';
}
$("#searchTips").html(html);
selectedItem = 0;
}
}
});
}
} else if (event.keyCode == 38) {
selectedItem = selectedItem - 1;
setSelectedItem(selectedItem);
//console.log(selectedItem);
} else if (event.keyCode == 40) {
selectedItem = selectedItem + 1;
setSelectedItem(selectedItem);
//console.log(selectedItem);
} else if (event.keyCode == 13) {
//console.log(selectedItem);
var url = $(".searchTips ul li").eq(selectedItem).find("a").attr("href");
if (url != "" && url != null && url != undefined) {
window.open(url);
}
}
}

$(document).on("mouseover", ".searchTips ul li", function() {
selectedItem = $(this).index();
setSelectedItem(selectedItem);
});
$(document).ready(function() {
$(".search input").focus(function() {
$(".searchTips").show();
if (document.getElementById("SearchName").value != "") {
$(".chacha").show();
} else {
$(".chacha").hide();
}
});
});
$(".search input").blur(function(event){
setTimeout(function(){
$(".searchTips").hide();
},300);
});