模拟搜索

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30596735

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/huangmingcong/archive/2013/05/07/3064128.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box{ width:500px; height:25px; margin:200px auto;}
</style>
<script>
window.onload = function(){
var arr = ['aaa','bbb','abc','ccc','sdf','sadggw','sdgwojo','聪哥','一aaaa个','a两撒地方个','a三胜多负少的个','a四恶化vv个','a五交话费公积金个','六十多个人刚和个','七撒地方个','qisagedifang'];
var txt = document.getElementById("txt");
var btnSearch = document.getElementById("btnSearch");
var contList = document.getElementById("contList");

txt.onkeyup=function(){
contList.innerHTML = '';
if(txt.value == '' || txt.value ==null){
return ;
}
for(var i=0;i<arr.length;i++){
var txtValue = txt.value.toLowerCase();
var arrValue = arr[i].toLowerCase();
/*if(arrValue.search(txtValue)!=-1){ //这里是模糊查询，只要数据里面包含了你输入的内容，就会显示
var bl = arr[i];
bl = bl.replace(txt.value,"<font style='color:red;'>"+txt.value+"</font>");
contList.innerHTML += bl +"<br/>";
}*/
if(arrValue.indexOf(txtValue)==0){ //这里是模糊查询，开头开始显示
var bl = arr[i];
bl = bl.replace(txt.value,"<font style='color:red;'>"+txt.value+"</font>");
contList.innerHTML += bl +"<br/>";
}
}
}
btnSearch.onclick=function(){
if(txt.value == ''){
return ;
}
window.location.href = 'http://www.baidu.com/s?wd='+txt.value;
}
}
</script>
</head>
<body>
<div class="box">
<div><input type="text" id="txt" size="50" /><input type="button" id="btnSearch" value="百度一下" /></div>
<div id="contList">

</div>
</div>
</body>
</html>