首页 > 代码库 > Jquery 仿百度搜索引擎自动完成功能
Jquery 仿百度搜索引擎自动完成功能
源代码如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动完成例子</title>
<script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.4.1.min.js"></script>
<style>
#search label {
display: block;
}
#search-text {
width: 150px;
}
.placeholder {
color: #999;
}
/*#sidebar .autocomplete {*/
.autocomplete {
margin:0px;
position: absolute;
background: #fff;
border: 1px solid #888;
width:110px;
list-style-type: none;
z-index: 52;
}
/*#sidebar .autocomplete li {*/
.autocomplete li {
padding:2px;
margin:0;
margin-left:-40px;
}
/*#sidebar .autocomplete li.selected {*/
.autocomplete li.selected {
background: #008;
color: #fff;
}
</style>
</head>
<script type="text/javascript">
//实现自动完成功能 像百度一样的功能
$(document).ready(function(e) {
//Bug:汉字不能查询的问题和空值的时候要出现值
var jsonData=http://www.mamicode.com/["张三","李四","1科比","罗晋","张娜","张芳","123","allen lverson","bob dylan","bob1","bob2","1nba"];
var selectedItem = null; //定义全局变量
var old_searchtext = null;
var $autoComplete = $(‘<ul class="autocomplete"></ul>‘).hide().insertAfter(‘#search_text‘);
//定义函数获取鼠标显示颜色
var setSelectedItem = function (item, eventKeyCode) {
selectedItem = item;
if (selectedItem == null || $(‘ul[class="autocomplete"]‘).find("li").length <= 0) {
//没有选择值则移除ul
$(‘ul[class="autocomplete"]‘).empty().hide();
return false;
}
if (selectedItem < 0) { //向上移出界
$autoComplete.find("li").removeClass("selected");
$("#search_text").val($("#Result_text").val());
selectedItem = null;
return false;
}
if (selectedItem >= $autoComplete.find("li").length) { //向下移出界
$autoComplete.find("li").removeClass("selected");
$("#search_text").val($("#Result_text").val());
selectedItem = null;
return false;
}
//移动上下键获取文本值
$("#search_text").val($autoComplete.find("li").removeClass("selected").eq(selectedItem).addClass("selected").text());
$autoComplete.show();
};
//按回车键获取值，但不能获取==>这里改为直接提交
var populateSearchField = function () {
$("#search_text").val($autoComplete.find("li").eq(selectedItem).text());
//移除ul
$(‘ul[class="autocomplete"]‘).empty().hide();
};
var searchLabel = $("#search_title").remove().text();
$("#form1").submit(function () {
if ($("#search_text").val() == searchLabel) {
$("#search_text").val(‘‘);
}
});
$("#search_text").addClass("placeholder")
.val(searchLabel)
.focus(function () {
if (this.value =http://www.mamicode.com/= searchLabel) {
$(this).removeClass("placeholder").val(‘‘);
}
})
.blur(function () {
if (this.value =http://www.mamicode.com/= "") {
$(this).addClass("placeholder").val(searchLabel);
}
})
.attr("autocomplete", "off") //关闭search_text文本框（即浏览器）自带的自动完成功能
.keydown(function () {
old_searchtext = $(this).val(); //按下时获取文本值
})
.keyup(function (event) {
var InComeDescription = $(this).val(); //按键释放时触发
//没有值直接返回,提高性能
if (InComeDescription == null || InComeDescription.length <= 0) {
return false;
}
//代码为40及以下的为特殊键（回车、方向、退出键等），为8backspace键,32空格键,13 回车
if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
selectedItem = null; //每次输入新的数据时清空，以使下拉列表显示正常
//有数据(可加个判断InComeDescritption不为空才取值)
$searchtextvalue=http://www.mamicode.com/$(‘#Result_text‘).val(InComeDescription);
if (jsonData.length) {
//var objData = http://www.mamicode.com/jQuery.parseJSON(jsonData);
var objData=http://www.mamicode.com/jsonData;
//先把以前的记录清空，不然下拉列表会重复
$(‘ul[class="autocomplete"]‘).empty();
$.each(objData, function (index, term) {
if(term.indexOf(InComeDescription)>-1){
$(‘<li></li>‘).text(term)
.appendTo($autoComplete)
.mouseover(function () {
setSelectedItem(index, null);
})
.click(function () {//实现选择值到文本框
$("#search_text").val(term);
$(‘ul[class="autocomplete"]‘).hide();
});
}
});
$autoComplete.show();//按百度默认不选择第一行
// setSelectedItem(0);//默认选中第一行,不然这时不显示
} else {
//没有数据就不显示
setSelectedItem(null, null);
}
} else if (event.keyCode == 38) {
//用户按了上方向键
if (selectedItem == null) { return false; } //不选
setSelectedItem(selectedItem - 1, 38);
} else if (event.keyCode == 40) {
//用户按了向下方向键
if (selectedItem == null) { selectedItem = -1; } //选择第一行
setSelectedItem(selectedItem + 1, 40);
}
})
.keypress(function (event) {
if (event.keyCode == 13 && selectedItem != null) {
populateSearchField();
event.preventDefault();
}
})
//失去焦点关闭下拉列表,因为blur先于click事件调用，所以这时在延迟以使当click事件执行时能执行
.blur(function (event) {
setTimeout(function () {
setSelectedItem(null)
}, 250);
});
});
</script>
<body>
Jquery仿百度自动搜索:提供搜索的数据（张三 李四 科比 张娜 张芳 123 allenlverson bobdylan bob1 bob2 1nba）
<br/>
<label id="search_title">Search the website</label>
<input type="text" ID="search_text" runat="server"></input>
<input type="hidden" id="Result_text" />
</body>
</html>
实现的功能如截图所示：
仿百度搜索引擎自动完成功能实现代码，实现同百度搜索一样的自动完成功能，希望能够帮助新学习Jquery的朋友，有需要的朋友可以下载,高手请多指点，下载地址：http://download.csdn.net/detail/javaquentin/8286573
Jquery 仿百度搜索引擎自动完成功能