必威体育Betway必威体育官网
当前位置:首页 > IT技术

js 百度联想搜索框

时间:2019-10-19 13:13:30来源:IT技术作者:seo实验室小编阅读:75次「手机版」
 

百度联想

1.测试dome

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="https://project.dabby.cn/javascripts/jquery-1.11.1-ui-1.11.0-ujs-3.1.4.js" type="text/JavaScript"></script>


<style>
li{
margin-left: -40px;
}
.li1{
background-color: aqua;
}
</style>
<body>
<h1>自动补全</h1>
<p style="margin: auto;width: 400px;">
<input type="text" id="name" size="60" autocomplete="off" />
<ul id="ul1" style="border: 1px solid red;display: none;width: 338px;list-style: none;margin-top: 0px;">
</ul>
</p>
</body>
</html>

js---------------

<script>
//获取结果集,循环填充li
var items=["aaa","abc","bac","bab","dda","ddb","cddd","ssa","xxb"];
var index=0;
$(function(){
var temp=new Array();
$("#name").bind("keyup",function(event){
if(event.keyCode!=38&&event.keyCode!=40)
index=0;
temp=new Array();
for(var i=0;i<items.length;i++){
if(items[i].indexof(this.value)>=0)
temp[temp.length]=items[i];
}
//控制li的显示和隐藏
if(!($(this).val()==""||temp.length==0)){
$("#ul1").show();
$("#ul1").html("");
for (var j=0;j<temp.length;j++) {
$("#ul1").APPend("<li id='li"+j+"' index='"+j+"'>"+temp[j]+"</li>");
}
}else{
$("#ul1").html("");
$("#ul1").hide();
}

//鼠标监听
if(temp.length>0){
if(event.keyCode==38)
index=index==0?temp.length-1:index-1;
if(event.keyCode==40)
index=index==temp.length-1?0:index+1;
if(event.keyCode==13){
var a1=$("#li"+index).html()
$("#name").val(a1)
$("#ul1").hide();
}
}
$("li").removeClass("li1")
$("#li"+index).addClass("li1")
});

//数据填充
$("#ul1").delegate("li","click",function(){
    $("#name").val(this.innerHTML);
    $("#ul1").hide();
});

})
</script>

相关阅读

百度开源 FAQ 问答系统(AnyQ)|FAQ数据集的添加

1.FAQ 所谓FAQ(Frequently Asked Questions)问答,指的是通过构建一个数量巨大的问题答案库来作为语料库,当输入一个问题时,通过计算

百度ueditor工具栏和输入框分离问题

百度ueditor富文本编辑器,当工具栏超过屏幕输入内容会导致工具栏和输入框分离的问题。问题原因是ueditor中有一个autoFloatEnabled

百度分享代码--一键分享Baidu Share BEGIN

http://share.baidu.com/code/advance 一、概述 百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表

百度图片爬虫

使用技术 python3 + requests模块安装requests模板pip install requests 实现目标 可以通过控制台输入爬取图片类型 指定爬取图

新网站如何提交链接让百度更快速的收录

对SEOer来说,新做好的网站如何让百度更快的收录,这是大家普遍关心的问题。做优化的最终目的是实现网站盈利,而要实现盈利就必须把网

分享到:

栏目导航

推荐阅读

热门阅读