js实现类似于联想关键词的搜索功能（附代码）
- 不言原创
- 2018-08-13 16:14:314203浏览
本篇文章给大家带来的内容是关于js实现类似于联想关键词的搜索功能（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
<meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#container{
position:absolute;
left:50%;
top: 40%;
}
#content{
float:left;
position:relative;
right:50%;
}
input{
border:0;
width:288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
.item{
padding:3px 5px;
cursor:pointer;
}
.addbg{
background:#87A900;
}
.first{
border:solid #87A900 2px;
width:300px;
}
#append{
border:solid #87A900 2px;
border-top:0;
display:none;
}
</style>
</head>
<body>
<p id="container">
<p id="content">
<p class="first"><input id="kw" onKeyup="getContent(this);" /></p>
<p id="append"></p>
</p>
</p>
</body>
</html>
二、js代码：
<script type="text/javascript">
var data = [
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function(){
$(document).keydown(function(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 38){
if(jQuery.trim($("#append").html())==""){
return;
}
movePrev();
}else if(keycode == 40){
if(jQuery.trim($("#append").html())==""){
return;
}
$("#kw").blur();
if($(".item").hasClass("addbg")){
moveNext();
}else{
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
}else if(keycode == 13){
dojob();
}
});
var movePrev = function(){
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if(index == 0){
$(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index-1).addClass('addbg');
}
}
var moveNext = function(){
var index = $(".addbg").prevAll().length;
if(index == $(".item").length-1){
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index+1).addClass('addbg');
}
}
var dojob = function(){
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);
$("#append").hide().html("");
}
});
function getContent(obj){
var kw = jQuery.trim($(obj).val());
if(kw == ""){
$("#append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<p class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</p>"
}
}
if(html != ""){
$("#append").show().html(html);
}else{
$("#append").hide().html("");
}
}
function getFocus(obj){
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj){
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
}
</script>
三、运行效果：
1.在输入框输入关键字：
2.键盘上下键选中：
3.enter键输入：
相关推荐：
js如何利用setInterval定时器方法实现轮播图 （完整代码）
js封装_new函数以及实现new关键字的方法（附代码测试）
以上是js实现类似于联想关键词的搜索功能（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn