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
方案一: input_search.js
方案二:见下一篇
js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(二)
参考文章:
/article/3968678.html
/article/6040217.html
实现思路很简单:
将匹配的内容放在一个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
相关文章推荐
- [Javascript] Web APIs: Persisting browser data with window.localStorage
- JS数组的forEach方法(兼容所有浏览器)
- javascript学习笔记之四
- 怎样让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
- Web components新玩具——X-View
- javascript中的Array对象的方法
- JS中的动态表格
- 深入理解JSP
- JavaScript--window与document的getComputedStyle()方法的区别
- JS arguments对象
- 新手学JavaScript(四)----CheckBox全选与全不选
- js中(function(){…})()立即执行函数写法理解
- JSON
- JSP取得绝对路径
- 韩顺平 javascript教学视频_学习笔记21_js内部类_js系统函数 重点重点
- JS中NaN值,Infinity属性与isNaN()函数
- [Javascript] The JSON.stringify API
- 【Web前端】:JavaScript操作Cookie实现“历史搜索”
- moment.js 添加中文语言(汉化)
- 一篇给迷茫者看的JavaScript 引擎指南