js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(二)

承接上一篇：js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)

实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。

实现思路很简单：

将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。


在做的过程中遇到一个棘手的问题：

input的onblur中隐藏下拉div

div的onmouseup 将选择的li内容设置到input

鼠标从Input移到下拉div并点击其中一个li的过程：

onmousemove => onblur => onmousedown => onmouseup

这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown

现在解决办法有两个：

方案1：

触发Onmousemove时获取当前鼠标位置

在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div

方案2：

在触发onmousemove时设置标志

在触发onblur时判断标志，如果标志没有设置则隐藏下拉div

若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏

若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器

代码：

index.html 见上一篇：js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)

方案一：见上一篇：js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)

方案二： input_search.js

var flag1 = 0;
var flag2 = 0;
var pos=-1, pos2=-1;

function init(){
var t, t2;
$("#listEmail").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
$("#listEmail").css("left",$("#inputBox").css("left"));
$("#listName").css("top",$("#inputBox").css("top")+$("#inputBox").css("height"));
$("#listName").css("left",$("#inputBox").css("left"));
hide();
$("li").css("font-size",$("#s_custemail").css("font-size"));
$("li").css("font-size",$("#s_custname").css("font-size"));
$("li").css("text-align","left");

bindInput();

var email = $("#s_custemail");
var name = $("#s_custname");

$("#listEmail li").mouseup(function(e){
if (t) {
clearInterval(t);
};
var str = $(this).text();
setValue(email, str);
});

$("#listName li").mouseup(function(){
if (t2) {
clearInterval(t2);
};
var str = $(this).text();
setValue(name, str);
});

$('#listEmail li').mousemove(function(e){
$flag1 = 1;
});

$('#listName li').mousemove(function(e){
$flag2 = 1;
});

$("#s_custemail").focus(function(){
$flag1 = 0;
});

$("#s_custname").focus(function(){
$flag2 = 0;
});

$("#s_custemail").blur(function(){
if (!$flag1) {
hide();
} else {
t = setTimeout("hide()",300);
}
});

$("#s_custname").blur(function(){
if (!$flag2) {
hide();
} else {
t2 = setTimeout("hide()",300);
}
});
}

function bindInput(){
//IE
if (window.ActiveXObject){
document.getElementById('s_custemail').attachEvent("onpropertychange",show1);
document.getElementById('s_custname').attachEvent("onpropertychange",show2);
}else{
$("#s_custemail").bind("input",show1);
$("#s_custname").bind("input",show2);
}
}

function show1(){
var s_value = $("#s_custemail").val();
$("#listEmail").children().children("li").hide();
showListEmail();
if(s_value.length >= 1){
$("#listEmail").children().children("li").each(function(){
var tmp = $(this).text().substr(0,$(this).text().length);

if(tmp && s_value==tmp.substr(0,s_value.length)){
$(this).show();
}
});
}
}

function show2(){
var s_value = $("#s_custname").val();
$("#listName").children().children("li").hide();
showListName();
if(s_value.length >= 1){
$("#listName").children().children("li").each(function(){
var tmp = $(this).text().substr(0,$(this).text().length);

if(tmp && s_value==tmp.substr(0,s_value.length)){
$(this).show();
}
});
}
}

function hide(){
$("#listEmail").css("display","none");
$("#listName").css("display","none");
}

function setValue(obj, str){
obj.val(str);
hide();
obj.focus();
}

function showListEmail(){
var obj = $('#s_custemail');
$("#listEmail").css("left",parseInt(obj.offset().left));
$("#listEmail").css("top",parseInt(obj.offset().top +obj.outerHeight()));
$("#listEmail").css('display', 'block');
}

function showListName(){
var obj = $('#s_custname');
$("#listName").css("left",parseInt(obj.offset().left));
$("#listName").css("top", parseInt(obj.offset().top + obj.outerHeight()));
$("#listName").css('display', 'block');
}

参考文章：

/article/3968678.html

/article/6040217.html