您的位置:首页 > Web前端 > JavaScript

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

2016-01-27 21:51 1286 查看
实现一个在编辑框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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>编辑框下拉列表演示</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='css/list.css' type='text/css' />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/input_search2.js"></script>
<script type="text/javascript">
$(document).ready(function(){init();});
</script>
</head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 style='margin:0;padding:0;'>
<table cellpadding=2 cellspacing=0 border=0>

<tr><td nowrap rowspan=10></td><td height=8></td></tr>
<tr><td> E-mail</td><td><input id="s_custemail" name='email' value='' AutoComplete="off" size=60 maxlength=256></td></tr>
<tr><td> 姓名</td><td><input id="s_custname" value=""  AutoComplete="off" size=60 maxlength=256></td></tr>
<tr><td> 单位</td><td><input name='unit' value="" size=60 maxlength=256 ></td></tr>
<tr><td> 部门</td><td><input name='part' value="" size=60 maxlength=256 ></td></tr>
<tr><td> </td><td> </td></tr>

</table>

<div id="listEmail" style="display:none">
<ul>
<li>liu2yi1@test.com</li>
<li>liu2er4@test.com</li>
<li>liu2san1@test.com</li>
<li>chen2yi1@test.com</li>
<li>chen2er4@test.com</li>
<li>chen2san1@test.com</li>
<li>zhang1yi1@test.com</li>
<li>zhang1er4@test.com</li>
<li>zhang1san1@test.com</li>
<li>li3er4@test.com</li>
<li>li3san1@test.com</li>
<li>li3si4@test.com</li>
<li>wang2san1@test.com</li>
<li>wang2si4@test.com</li>
<li>wang2wu3@test.com</li>
<li>zhao4si4@test.com</li>
<li>zhao4wu3@test.com</li>
<li>zhao4wu3@test.com</li>
<li>sun1wu3@test.com</li>
<li>sun1liu4@test.com</li>
<li>sun1qi1@test.com</li>
<li>zhou1liu4@test.com</li>
<li>zhou1qi1@test.com</li>
<li>zhou1ba1@test.com</li>
<li>wu2qi1@test.com</li>
<li>wu2ba1@test.com</li>
<li>wu2jiu3@test.com</li>
<li>zheng4ba1@test.com</li>
<li>zheng4jiu3@test.com</li>
<li>zheng4shi2@test.com</li>

</ul>
</div>
<div id="listName" style="display:none">
<ul>
<li>刘一</li>
<li>刘二</li>
<li>刘三</li>
<li>陈一</li>
<li>陈二</li>
<li>陈三</li>
<li>张一</li>
<li>张二</li>
<li>张三</li>
<li>李二</li>
<li>李三</li>
<li>李四</li>
<li>王三</li>
<li>王四 </li>
<li>王五 </li>
<li>赵四 </li>
<li>赵五 </li>
<li>赵五</li>
<li>孙五</li>
<li>孙六 </li>
<li>孙七</li>
<li>周六</li>
<li>周七  </li>
<li>周八</li>
<li>吴七</li>
<li>吴八 </li>
<li>吴九 </li>
<li>郑八</li>
<li>郑十</li>
</ul>
</div>
</body></html>


方案一: 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){
var str = $(this).text();
setValue(email, str);
});

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

$('#listEmail li').mousemove(function(e){
pos = getMouseLocation(e);
});

$('#listName li').mousemove(function(e){
pos2 = getMouseLocation(e);
});

$("#s_custemail").blur(function(){
if( pos==-1 || !isOutOfBound(pos,1) ){
pos = -1;
hide();
}
});

$("#s_custname").blur(function(){
if( pos==-1 || !isOutOfBound(pos,0) ){
pos = -1;
hide();
}
});
}

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();
flag1 = 1;
}
});
}
}

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();
flag1 = 1;
}
});
}
}

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');
}

function getEvent() //同时兼容ie和ff的写法
{
if (document.all)
return window.event;
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event
|| arg0.constructor == MouseEvent)
|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
}

function getMouseLocation(event) {
var __is_ff = (navigator.userAgent.indexOf("Firefox") != -1); //Firefox
var e = getEvent(event);
var mouseX = 0;
var mouseY = 0;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
if (__is_ff) {
mouseX = e.layerX + document.body.scrollLeft;
mouseY = e.layerY + document.body.scrollLeft;
}
else {
mouseX = e.pageX || e.clientX + scrollX;
mouseY = e.pageY || e.clientY + scrollY;
}
return { x: mouseX, y: mouseY };
}

function isOutOfBound(pos, flag){
var obj;
if (flag) {
obj = $('#listEmail');
}else{
obj = $('#listName');
}
if (pos && obj
&&pos.x >= obj.offset().left
&& pos.x <= obj.offset().left+obj.outerWidth()
&& pos.y >= obj.offset().top
&& pos.y <= obj.offset().top+obj.outerHeight() ) {
return true;
};
return false;
}


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

参考文章:

/article/3968678.html

/article/6040217.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: