最近项目中要使用一个支持输入框搜索及查询，类似自动不全的功能
需求如下：
1.当输入框为空的时后，获取焦点后，显示出当前输入框可以显示的所有信息
2.当输入框输入信息后，支持模糊查询数据过滤。
3.当输入框及下拉显示框失去焦点后（点击其以外的区域，则隐藏显示的下拉框部分）
设计思路如下：
1.当点击输入框后，查询当前输入框可以查询的信息。显示在下拉显示列表中
2.当点击下拉列表时，回填当先下拉列表的输入值，显示在输入框中
3.当输入信息时，过滤当前下拉列表可以显示的信息，重新加载信息下拉列表
4.当点击下拉列表及输入框以外的区域时，隐藏下拉列表部分。（难点）
5，前台在输入框下面对接一个浮动的下拉列表（前端设计部分）
js部分:
$().ready(function() {
//处理流程：点击时1、清空下拉框，根据输入框的值，查询下拉信息
$("#sns").click(function(){
var sns = $("#sns").val();
conDataToLi(sns);
});
$(document).click(function(e){
var idValue = https://www.it610.com/article/$(e.target).attr("id");
//获取当前点击区域对象的id值
if(idValue != "sns" && idValue != "item" ){
$('#item').hide();
}
});
var lastTime;
$("#sns").keyup(function(e){
var sns = $("#sns").val();
$("#item").empty();
lastTime = e.timeStamp;
setTimeout(function () {
if (lastTime - e.timeStamp == 0) {
conDataToLi(sns);
}
}, 1000);
});
function conDataToLi(sns){
var templateLi ='templateText ' ;
$.ajax({
url: "productSrch.htm",
type: "POST",
data: {sns:sns},
dataType: "json",
success: function(data) {
// 回填数据
if(data.length > 0){
$("#item").empty();
$("#item").show();
$.each(data, function(i, item) {
var templateLis = "" ;
templateLis=templateLi.replace("$templateVal",item.sn);
templateLis=templateLis.replace("templateText",item.sn+"--"+item.fullName);
$("#item").append(templateLis);
});
// 绑定回填数据事件
$('#divEara ul li').click(function(){
// 回填数据
var $this = $(this);
$("#sns").val($this.text());
// 隐藏弹出框
$("#item").empty();
$('#item').hide();
});
}else {
$("#item").append('请选择 ');
$('#item').hide();
}
}
});
}
【关于仿百度搜索框的简单思路【2017-12-25】】});
html代码部分:
【难点主要是前端CSS不熟悉，所以比较坑】
