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:#000;
font-size:14px;
font-family:'微软雅黑';
}
.box{
margin:50px auto;
width:300px;
}
.box input{
padding:0 10px;
width:278px;
height:30px;
border:1px solid green;
}
.box ul{
display:none;
border:1px solid green;
border-top:none;
}
.box ul li{
list-style:none;
padding:0 10px;
height:30px;
line-height:30px;
cursor:pointer;
}
.box ul li:hover{
background:#eee;
}
</style>
</head>
<body>
<div class='box'>
<input type="text" id='searchInp'/>
<ul id='searchBox'>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<script src='jquery.min.js'></script>
<script>
var searchModule = (function(){
var $searchInp = $('#searchInp'),
$searchBox = $('#searchBox');
//向百度的服务器发送JSONP请求，把数据绑定到容器当中
function bindHTML(){
var searchKey = $searchInp.val();
function callback(data){
data = data['g'];
var str = '';
$.each(data,function(index,item){
if(index<=3){
str += '<li>'+item+'</li>'
}
})
$searchBox.html(str).stop().slideDown(300);
}
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGKo9WTAnF6hhy/su?wd="+searchKey,
dataType:"jsonp",
jsonp:'cb',
success:callback
})
}
//事件绑定和模块的入口
function init(){
//文本框获取焦点或者输入内容，判断当前文本框中是否有内容，有内容绑定数据，没有内容隐藏展示框
$searchInp.on("focus keyup",function(){
var val = $(this).val();
if(val.length>0){
bindHTML();
return;
}
$searchBox.stop().slideUp(300);
}).on('blur',function(){
window.setTimeout(function(){
$searchBox.stop().slideUp(300);
},3000)
})
//给展示框中的li绑定方法
$searchBox.on('click',function(e){
var tar = e.target,
tarTag = tar.tagName.toUpperCase(),
$tar = $(tar);
if(tarTag==="LI"){
$searchInp.val($tar.html());
$(this).stop().slideUp(300);
}
})
}
return {
init:init
}
})()
searchModule.init();
</script>
</body>
</html>
以上这篇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仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成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
-
模拟一个类似百度google的模糊搜索下拉列表
复制代码 代码如下: // JavaScript Document function onChangehoverLi(thisLi){ $("#searchtext").val($(thisLi).html()); $("#suggest_ul").hide(0); validateform2(); } $(function(){ //载入时隐藏下拉li $("#suggest_ul").hide(0); }); //Ajax 动态获取关键字 /
-
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
-
JS模拟百度搜索框和选项卡的实现
目录 练习1 练习2,选项卡,详细代码如下: 练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
-
js模拟hashtable的简单实例
复制代码 代码如下: function Hashtable()//自定义hashtable{ this._hash = new Object(); this.add = function(key, value) { if (typeof (key) != "undefined") { if (this.contains(key) == false) { this._hash[key] = typeof (va
-
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-
-
JS模拟实现哈希表及应用详解
本文实例讲述了JS模拟实现哈希表及应用.分享给大家供大家参考,具体如下: 在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子. 说明: 这篇文章所写并不是真正意义的哈希表,只是与哈希表的使用有相似之处. 第一部分:相关知识点 属性的枚举: var person = { name: "zzw", sex: "Male", age: 21 }; for (var prop in person
-
JS模拟的腾讯微博app撕纸效果的实例代码
腾讯微博app撕纸效果 body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;}
-
使用 Vue.js 仿百度搜索框的实例代码
整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s
-
JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS模拟bootstrap下拉菜单效果实例
本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的
-
js实现百度联盟中一款不错的图片切换效果完整实例
本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现百度联盟中的一个不错的图片切换效果</title> <body> <script> var links = new Array(); links[1] = "http://www.baidu.com/"; links[2] = "http://www.jb5