java实现百度模糊搜索_js模拟百度模糊搜索的实例

Document

*{

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;

}

• 1111
• 2222
• 3333
• 4444

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 += '

'+item+''

}

})

$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();