模拟一个类似百度google的模糊搜索下拉列表

代码如下:

// JavaScript Document
function onChangehoverLi(thisLi){
$("#searchtext").val($(thisLi).html());
$("#suggest_ul").hide(0);
validateform2();
}

$(function(){
//载入时隐藏下拉li
$("#suggest_ul").hide(0);
});

//Ajax 动态获取关键字

//监听文本框输入变化

function fuzzySearch(){

//创建ajax对象函数
function createLink(){
if(window.ActiveXObject){
var newRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var newRequest = new XMLHttpRequest();
}
return newRequest;
}

//如果文本框为空，不发送请求
if($("#searchtext").val().length==0||$("#searchtext").val().length>10){
$("#suggest_ul").hide(0);
return;
}
//发送请求
http_request = createLink();//创建一个ajax对象
if(http_request){
var sid = $("#searchtext").val();
var url = "contentSearchAction!getSynonyms.action";
var data = "keywords="+encodeURI(sid);
//alert(data)
http_request.open("post",url,true);
http_request.setRequestHeader("content-type","application/x-www-form-urlencoded");

//指定一个函数来处理从服务器返回的结果
http_request.onreadystatechange = dealresult; //此函数不要括号
//发送请求
http_request.send(data);
}

//处理返回结果
function dealresult(){
if(http_request.readyState==4){
//等于200表示成功
if(http_request.status==200){
if(http_request.responseText=="no"){
$("#suggest_ul").hide(0);
return;

}
$("#suggest_ul").show(0);
var res = eval("("+http_request.responseText+")");
var contents="";
for(var i=0;i<res.length;i++){
var keywords = res[i].keywords;
contents=contents+"<li onclick='onChangehoverLi(this);' class='suggest_li"+(i+1)+"'>"+keywords+"</li>";

}
$("#suggest_ul").html(contents);

}
}
}

}
//鼠标
$(function(){

//按下按键后300毫秒显示下拉提示
$("#searchtext").keyup(function(){
setInterval(changehover,300);
function changehover(){
$("#suggest_ul li").hover(function(){ $(this).css("background","#eee");},function(){ $(this).css("background","#fff");});
}
});

});

页面：


代码如下:

<!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>searchSuggest</title>
<link href="css/searchSuggest.css" type="text/css" rel="stylesheet" >
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/searchSuggest.js"></script>
<style>
#suggest_ul{
width:100%;
max-height:223px;
margin:0px;
padding:0px;
border:1px solid #ccc;
background-color:#ffffff;
list-style-type:none;
}

#suggest_ul li{
padding-left:5px;
line-height:22px;
font-size:13px;
width:100%;
height:22px;
cursor:default;
}
</style>
</head>

<body>
<div id="searchSuggest">
<form action="deal.php" method="get" id="suggest_form">
<input type="text" id="searchtext" name="searchtext" autocomplete="off" value="search..." oninput="fuzzySearch();" onblur="if(this.value==''){this.value='search...'}" onfocus="if(this.value=='search...'){this.value=''}"/>
<input type="submit" value="搜索一下" id="suggest_submit" />
</form>
<ul id="suggest_ul">
</ul>
</div>

</body>
</html>

使用的过程中发现一种情况不会去搜索，ios系统自带的输入法输入中文的时候既不是onkeyup 也不是onchange事件，因为是用户刚开始的按钮是按的虚拟键盘，

可以使用onkeyup 事件，当出现中文的时候点击中文将 输入框里面的值改变成了中文，onchange不能捕获脚本改动的输入框的值。

最后的解决办法是 用oninput事件，这个是最新的html5 中的事件非常好用，只是有些低版本的浏览器不能兼容比较麻烦。

赞 (0)

相关推荐

  • JS仿百度自动下拉框模糊匹配提示

    JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

  • js实现百度搜索提示框

    js实现百度搜索提示框

    效果如下所示 话不多说,请看代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>百度搜索提示框</title> <style> * { margin: 0;padding: 0; outline: none;} .search101 { width: 650px; margin: 300px auto; font-size: 0

  • js模拟百度模糊搜索的实例

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } input{ display:block; list-style:none; } html,body{ color:#0

  • 模拟一个类似百度google的模糊搜索下拉列表

    复制代码 代码如下: // JavaScript Document function onChangehoverLi(thisLi){ $("#searchtext").val($(thisLi).html()); $("#suggest_ul").hide(0); validateform2(); } $(function(){ //载入时隐藏下拉li $("#suggest_ul").hide(0); }); //Ajax 动态获取关键字 /

  • 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)

    具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或Google . 另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表. 思路差不多,哈. 演示及代码:  演示代码 代码下载运行代码: 用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think /*reset css*/ body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96

  • 让input框实现类似百度的搜索提示(基于jquery事件监听)

    让input框实现类似百度的搜索提示(基于jquery事件监听)

    挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果.真正遇到这个需求,发现还真找不到.于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装. 需求:实现带提示的input框,类似百度搜索,有改动的时候去获取常用关键词,数据来源于系统数据库,支持鼠标选择或键盘选择 思路:框架一贯思路,通过class作为监听入口,通过data作为数据传递:通过监听input和propertychange事件实现实时的改动监听,input是主流,pro

  • AJax实现类似百度搜索栏的功能 (面试多见)

    实习过程中需要用到异步提交功能,于是试着去了解了一下ajax,瞬间感觉以前学习的真是九牛一毛啊,确实如此,做web应用开发,如果不会jquery和ajax,那真的就是白学了,了解之后我才感觉网上的那些花哨的功能已经都可以实现了. 话不多说,下面有ajax实现一个简单的百度搜索栏的功能,当用户在上面的输入框中键入字符时,会执行函数 "showHint()" .该函数由 "onkeyup" 事件触发: function showHint(str) { var xmlht

  • 基于Vue el-autocomplete 实现类似百度搜索框功能

    基于Vue el-autocomplete 实现类似百度搜索框功能

    效果图如下所示: 首先上代码 <template> <div class="assets-search height-all"> <div class="search-layout"> <div class="search-title">让数据触手可及</div> <div class="search-input-layout"> <!--<e

  • javascript实现类似百度分享功能的方法

    javascript实现类似百度分享功能的方法

    本文实例讲述了javascript实现类似百度分享功能的方法.分享给大家供大家参考.具体如下: 像腾讯,开心社区都提供这种分享接口的,做百度分享功能很简单的 一般网站要接入分享功能,大部分都用百度分享和addthis的代码,可是自己定制性太差,该分享功能样式都可以自己修改,简洁没过多js代码,大大提高网页加载速度. 运行效果如下图所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • js 数组实现一个类似ruby的迭代器

    js 数组实现一个类似ruby的迭代器

    分为如下几节: ·基本实现 ·在迭代中引用原来的对象,或者直接改变数组的值而不是返回一个新数组 ·向迭代传入无限多的参数 ·基本实现 今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少,主要是要写的代码太多了,也许是js有特殊的处理数组的方式,真是我不知道而已,但是我真的想自己给js实现一个类似ruby的迭代器的东东,而且实现起来也不难,那就开始动手吧. 真的应该庆幸js是动态语言啊,如果是静态语言,实现起来很不方便(别说要我重新定义一个继承自arr

  • JS实现获取来自百度,Google,soso,sogou关键词的方法

    本文实例讲述了JS实现获取来自百度,Google,soso,sogou关键词的方法.分享给大家供大家参考,具体如下: /*可获取用户,通过哪个关键词访问该页,可自行添加SOGOU,SOSO,有道等搜索引擎*/ var refer=document.referrer; var sosuo=refer.split(".")[1]; var grep=null; var str=null; var keyword=null; switch(sosuo){ case "baidu&q

  • 使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

    使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

    先来看看下面实时效果演示: 用户点击编辑时,在点击行下动态产生一行.编辑铵钮变为disabled. 新产生的一行有更新和取消的铵钮,点击"取消"铵钮,删除刚刚动态产生的行.编辑铵钮状态恢复. 更新与删除铵钮功能没有什么特别的. 在ASP.NET MVC视图html代码如下,普通的表格table,普通的html标签: 删除的铵钮功能: $('.Delete').click(function () { var flag = confirm('你确认是否删除记录?'); if (flag)

  • python使用xmlrpclib模块实现对百度google的ping功能

    本文实例讲述了python使用xmlrpclib模块实现对百度google的ping功能.分享给大家供大家参考.具体分析如下: 最近在做SEO的时候,为了让发的外链能够快速的收录,想到了利用ping的功能,google和百度都有相关的ping介绍,有兴趣的朋友可以去看看相关的知识.实现ping功能除了可以用一些开源的博客程序,比如WP,它是可以在后台设置ping地址的,只要设置好以后,你发帖子,就会自动的通知搜索引擎,我的博客已经更新了,而今天我用的方法是不通过WP等带有ping功能的博客,自己

随机推荐