类似google suggest的搜索建议效果

这是一个类似google suggest的搜索建议效果，支持中文，有点非常遗憾的是在FIREFOX下中文无法显示，而英文则正常，来看看这个google suggest的搜索建议效果



演示页面
http://www.dayanmei.com/search.php

使用方法：
在HTML文件头部head包含以下几个js文件（请不要直接调用我的JS文件，已经设置了JS文件防盗链）
<script type="text/javascript" src="http://www.dayanmei.com/js/prototype.js"></script>
<script type="text/javascript" src="http://www.dayanmei.com/js/autocomplete.js"></script>
<script type="text/javascript" src="http://www.dayanmei.com/js/so.js"></script>
包含以下css文件
<link rel="stylesheet" type="text/css" href="http://www.dayanmei.com/css/autocomplete.css" />

比如表单中一个input
<input type="text" name="keyword" id="keyword" />
<input type="text" name="otherkeyword" id="otherkeyword" />

在页面底部初始化一个类注意红色字体与表单中input的id一致
<script type="text/javascript"> 
    new CAPXOUS.AutoComplete("keyword", function() {
        return "http://www.dayanmei.com/suggest.php?mod=keyword&keyword=" + this.text.value;
    });
    new CAPXOUS.AutoComplete("othereyword", function() {
        return "http://www.dayanmei.com/suggest.php?mod=keyword&keyword=" + this.text.value;
    });
</script>

在suggest.php中输出类似这样

<script type='text/javascript'>document.domain='www.dayanmei.com';</script><div onselect="this.text.value = 'google';"><b>google</b></div>
<div onselect="this.text.value = '昨天GOOGLE 8岁了';"><b>昨天GOOGLE 8岁了</b></div><div onselect="this.text.value = 'google百度的新动作';"><b>google百度的新动作</b></div>
<div onselect="this.text.value = 'baidu和google发生交火事件';"><b>baidu和google发生交火事件</b></div>
<div onselect="this.text.value = 'google pr值预测';"><b>google pr值预测</b></div>
<div onselect="this.text.value = 'google pr值正在更新';"><b>google pr值正在更新</b></div>
<div onselect="this.text.value = 'Increase Google Page Rank(PR)';"><b>Increase Google Page Rank(PR)</b></div>
<div onselect="this.text.value = 'google sitemap在线生成工具';"><b>google sitemap在线生成工具</b></div>
<div onselect="this.text.value = 'google翻译真不赖';"><b>google翻译真不赖</b></div>

具体使用方法请参看演示页面,要注意的是，如果需要中文支持，suggest.php的编码应该为UTF-8
源文件打包下载
http://www.dayanmei.com/upload/googlesuggest.rar

• 收藏类似google suggest的搜索建议效果到百度搜藏 
• 上一主题: 模拟弹出窗口
• 下一主题: 不定数量表单添加的处理方法
• 当前位置个人日志>>