首页 > javascript知识库 > 模拟百度、谷歌、搜搜搜搜提示框效果

模拟百度、谷歌、搜搜搜搜提示框效果

2015年3月14日 发表评论 阅读评论

仿照百度等搜搜引擎做的下拉提示效果,原创,兼容,支持上下键盘
// JavaScript Document

var lastsearch_wd
var first_wd_li=0;

if(!window.event){
(function (bool) {
//兼容FF获取键盘监控值方法
if (bool) {
window.__defineGetter__(“event”, function () {
//兼容Event对象
var o = arguments.callee;
do {
if (o.arguments[0] instanceof Event) return o.arguments[0];
} while (o = o.caller);
return null;
});

}

})(/Firefox/.test(window.navigator.userAgent));
}

function search_do(){
$id(“wd”).value=$id(“wd”).value.replace(/(^\s*)/g,””);//去掉左空格
if($id(“wd”).value.replace(/(\s*$)/g,””)==lastsearch_wd) return false//去右空格做比较
if($id(“wd”).value!=” && $id(“wd”).value!=’ ‘){
$id(“ajax_search_result”).style.display=”block”
$id(“ajax_search_result_ul”).innerHTML=””
lastsearch_wd=$id(“wd”).value
ajax(“ajax_search_result_ul”,”/inc/ajax.php?act=search_wd”,$id(“wd”).value,”<li>正在搜索…</li>”)
first_wd_li=0
}

}

var writing_timer

function skeydown(){clearTimeout(writing_timer)}//当输入时,自动取消搜索

function skeyup(){//不输入0.3秒之后再ajax搜索
writing_timer=setTimeout(“search_do()”,300)
if($id(“wd”).value==”) {
lastsearch_wd=”
clearTimeout(writing_timer)
hides(event)
}
}

var serach_url=new Array(“/do/search.html”,”/shop/shop.html”,”/shop/product.html”,”/togo/togo.html”,”/info/info.html”,”/shequ/”,”/bmfw/list.html”,”/help/list.html”);

function button_wd(){
if($id(“wd”).value!=” && $id(“wd”).value!=’对不起,请输入搜索关键词’) {
window.location.href=”http://www.s2c.cn/do/search.html?wd=”+encodeURI($id(“wd”).value)
}
else {
$id(“wd”).value=”对不起,请输入搜索关键词”
$id(“wd”).style.color=”blue”
$id(“wd”).focus()
}
}

function start_search(ac){
hides(event);window.location.href=”http://www.s2c.cn”+serach_url[first_wd_li]+’?wd=’+encodeURI($id(“wd”).value)
}

function shownext_downkey(){
if(lastsearch_wd==$id(“wd”).value){
var e = window.event;
if(e) {
if(e.keyCode==13) start_search()
if(e.keyCode==27) hides(event);
}
else {
if(e.which==13) start_search()
if(e.which==27) hides(event);
}
if($id(“ajax_search_result”).style.display==”block”){
for(i=1;i<=7;i++){
$id(“wd_onli”+i).style.background=”none”
}
}
if(e){
if(e.keyCode==40) first_wd_li++
if(e.keyCode==38) first_wd_li–
}
else{
if(e.which==40) first_wd_li++
if(e.which==38) first_wd_li–
}
if(first_wd_li==8) first_wd_li=1
if(first_wd_li==0) first_wd_li=7
if($id(“ajax_search_result”).style.display==”block”) $id(“wd_onli”+first_wd_li).style.background=”#b5c9e1”
}
}

function outsearchvalue(n){
$id(“wd_onli”+n).style.background=”none”
first_wd_li=0
}

function movesearchvalue(n){
for(i=1;i<=7;i++){
$id(“wd_onli”+i).style.background=”none”
}
first_wd_li=n
$id(“wd_onli”+first_wd_li).style.background=”#b5c9e1″
}

function hides(event){
event= event || window.event;
srcobj=event.target || event.srcElement;
if(srcobj.tagName!=”INPUT” || srcobj.tagName!=”LI”) {
$id(“ajax_search_result_ul”).innerHTML=”
$id(“ajax_search_result”).style.display=”none”
}
}
document.onclick=hides

  1. 本文目前尚无任何评论.
您必须在 登录 后才能发布评论.
css.php