模拟一个类似百度google的模糊搜索下拉列表
模拟一个类似百度google的模糊搜索下拉列表
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下://JavaScriptDocumentfunctiononChangehoverLi(thisLi){$("#searc...

复制代码 代码如下:

// 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);'+(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 中的事件非常好用,只是有些低版本的浏览器不能兼容比较麻烦。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类