实现类似于百度搜索的功能

标签：

　　本文主要实现一个类似于百度搜索一样，每输入一个字符，便向后台发送一次请求，并将返回的内容在输入框下面显示出来。

      实现分为HTML，JS两部分（只实现前端）：

　   HTML：

　　　　<div class=‘input-group‘>

　　　　　　<input type=‘text‘  id=‘searchInputId‘/>

　　　　</div>

　　　　<div id=‘filterDiv‘ class=‘inputFilter‘></div>

　　JS:　

　　1、点击输入框、输入字符、离开输入框以及按键盘所触发的事件

　　　　$(document).on(‘focus‘, ‘#searchMotor‘, function(){
　　　　　　$this = $(this);
　　　　　　if($this.val() != ‘‘){
　　　　　　　　$(‘#motorFilter‘).width($(‘#searchMotor‘).width()+20);
　　　　　　　　$(‘#motorFilter‘).show();
　　　　　　}
　　　　});

　　　　$(document).on(‘blur‘, ‘#searchMotor‘, function() {
　　　　　　setTimeout(function(){
　　　　　　　　$(‘#motorFilter‘).hide();
　　　　　　},200);

　　　　　　index = -1;
　　　　});

　　　　$(‘#searchMotor‘).bind(‘input propertychange‘, function(){
　　　　　　if($(this).val() != ‘‘){
　　　　　　　　$(‘#motorFilter‘).width($(‘#searchMotor‘).width()+20);
　　　　　　　　$(‘#motorFilter‘).show();
　　　　　　　　setTimeout(getMotorByInput($(‘#searchMotor‘).val()), 500);
　　　　　　　　index = -1;
　　　　　　}
　　　　});

　　　　$(‘#searchMotor‘).keydown(function(event) {
　　　　　　keydown(event, $(this), $(‘#motorFilter‘), ‘matchBrand‘);
　　　　});

function getMotorByInput(value)
{
$.ajax({
type: "POST",
data: {},
url: createLink(‘product‘, ‘getBrandList‘, "value="+value),
dataType:‘json‘,
success:function(data){
var searchList = "<ul>";
if(!isEmptyObj(data))
{
for(var key in data){
searchList += "<li data-key=‘‘ id=‘"+key+"‘ onclick=‘selectBrandLabelFromProduct(this,"+key+")‘>" + data[key] + "<b></b></li>";
}
} else {
searchList += "<li>"+v.cantFindInfo+"</li>";
}

searchList += "</ul>";

// motorFilter为下拉框div的id
$(‘#motorFilter ul‘).remove();
$(‘#motorFilter‘).append(searchList);
},
error:function(message){
}
});

/*
*通过键盘上下键进行选择，通过enter键确定
*searchInputDom 输入框元素
*searchListDiv 下拉框元素
*searchType 搜索类型
*/
function keydown(event, searchInputDom, searchListDiv, searchType)
{
var key = event.keyCode,
searchNum = searchListDiv.find("li").length, // 搜索到的相关条数
li = searchListDiv.find("li:eq(" + index + ")"); // 当前通过键盘选中的是第几条li

if (key == 13) {/*回车搜索*/
event.preventDefault();

// 选择适配车型按回车键
if(searchType == ‘matchBrand‘) {
if(li.attr(‘id‘)) {
selectBrandLabelFromProduct(li, li.attr(‘id‘));
}
}

searchListDiv.hide();
index = 0;
}
if ($.trim(searchInputDom.val()).length == 0)
return;

if (key == 38) { /*向上按钮*/
index--;
if (index == -1) index = searchNum - 1; //到顶了
} else if (key == 40) {/*向下按钮*/
searchListDiv.show();
index++;
if (index == searchNum) index = 0; //到底了
} else {
return false;
}

li = searchListDiv.find("li:eq(" + index + ")");

// 产品名称按上下键时input框内容改变
if(searchType == ‘productName‘){
if(li.attr(‘id‘)) {
selectProductToInput(li.attr(‘id‘), li.text());
}
}

li.css("background", "#f0f0f0").siblings().css("background", "");
type = li.attr("class");
}

实现类似于百度搜索的功能

标签：

原文地址：http://www.cnblogs.com/hbujt/p/4872707.html