类似搜索建议的输入选择问题

tuoshi 2011-03-30 09:47:27
下面是我的简化代码,焦点到第一个文本框列出选择项目,选中后自动赋值给文本框。

我想要焦点移出第一个文本框后关闭选择项目,这句代码我现在注释掉了,如果不注释的话就不能自动赋值了。

大家帮我看看怎么改?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});
$("#input1").blur(function () {
//$("#searchKeyTip").hide();
});
function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();
}
</script>
</body>
</html>
...全文
173 点赞 收藏 29
写回复
29 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
Mr-Jee 2011-04-03
何须这么麻烦 onclick => onmousedown就可以了

onclick 先于 onblur
但是onblur 先于onclick
回复
$(document).mousedown和document.onclick,都需要鼠标点击别处,达不到鼠标移开即时隐藏的效果。
我上面的方法只是直接想到的最简单和直观并能达到效果的方式,达到、直观就OK了。
延时关闭对这个问题来说,也是中规中矩的一种解决方式,但有个延时的现象,需要根据操作速度设置一个合适的值。同时对CPU来说,使用计时器是一个相对更高的开销,除非必要还是不使用。
回复
荒牧 2011-04-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul><li><a href='javascript:void(0);' onmousedown='chooseinput1(123,event);'>123</a></li>";
showtext += "<li><a href='javascript:void(0);' onmousedown='chooseinput1(456,event);'>456</a></li></ul>";
$("#suggest").html(showtext);
});
$(document).mousedown(function(event){
$("#suggest").hide();
});
function chooseinput1(obj,event) {
$("#input1").val(obj);
$("#suggest").hide();
event.stopPropagation();
}
</script>
</body>
</html>

因为javascript的事件是可传递的,楼主你大可以先event。stopPropagation(),停止传递,就没问题的了,各浏览器你都可以测试一下
回复
KeepMoving 2011-04-01
代码太多了,我就不写了,帮顶吧!
回复
-布谷鸟- 2011-04-01
本贴的主要问题在于,当焦点脱离输入项1时,有不同的处理方式:当光标落入suggest区时不能隐藏suggest,而当光标落于其它地方时,要隐藏suggest.而这种结果是onblur事件所无法解决的!因此需要引入其它的事件处理!
其实对于onmouseover及onmouseout事件,本人感觉用户的体验不是很好,因为可能不是用户主动要求显示的内容,造成屏幕内容产生不期望的抖动.对于时间延时方案,我也觉得不是好的解决方式,因为延时很难把握,而且使用得程序变得复杂化.
本人引入onmousedown事件,很好地解决了这个问题;而且对原贴做了扩展,以适应更多的复杂环境.
本人一贯不太习惯于用Jquery,以下是直接用javascript写就的结果.楼主可以参考一下,注意down1中对input2的处理,为做对比,隐藏了一个BUG.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">< / script>
</head>
<body onmousedown="down1()">
<div id=myid style="border:1;background:#DDDDEE;">
<p><label>输入项20:</label><input id="input1" type="text" /></p>
<div style="display:none;" id="suggest1"></div>
<p><label>输入项21:</label><input id="input2" type="text" /></p>
<div style="display:none1;" id="suggest2"></div>
<p><label>输入项22:</label><input id="input3" type="text" /></p>
<p><label>输入项23:</label><input id="input4" type="text" /></p>
</div>
<span id=msg> </span>
</body>
<SCRIPT>
window.i1=false;
window.i2=false;
function o(n)
{
this.n = n;
this.sa = new Array();
var ss = "suggest"+this.n;
var id1 = document.getElementById(ss);
this.html=function(){
var s = "<ul>";
for(var i=0;i<this.sa.length;i++)
{
s+="<li style='cursor:hand;' onmouseover='this.style.color=\"#0000AA\";' onmouseout='this.style.color=\"#000000\";' onclick='input"+this.n+".value=\""+this.sa[i]+"\";input"+this.n+"_hide();'>"+this.sa[i]+"</li>";
}
s+="</ul>";
id1.innerHTML = s;
}
}

var myobj = new o(1);
myobj.sa = ["111","222","333","444"];
myobj.html();
var myobj = new o(2);
myobj.sa = ["123","234","456","678"];
myobj.html();

function input1_show(){suggest1.style.display="block";}
function input1_hide(){suggest1.style.display="none";}

function input2_show(){suggest2.style.display="block";}
function input2_hide(){suggest2.style.display="none";}

function input1.onfocus(){window.i1=true;input1_show();}
function input2.onfocus(){window.i2=true;input2_show();}

function down1(){

var e = event;
if (e.srcElement.parentNode.parentNode.id != "suggest1" && e.srcElement.id != "input1")
{
input1_hide();
}
if (e.srcElement.parentNode.parentNode.id != "suggest2")
{ //如果不加 && e.srcElement.id != "input2" 第二次及以后点击input2则suggest2都隐藏
input2_hide();
}
}

document.onkeydown=function()
{
if(event.keyCode && event.keyCode==9)
{
if (window.i1) {window.i1=false;input1_hide();}
if (window.i2) {window.i2=false;input2_hide();}
}
}
</SCRIPT>

</html>

回复
ilikethelife 2011-04-01
[Quote=引用 20 楼 theforever 的回复:]
by theforever_csdn:
给$("#suggest")加上mouseover和mouseout事件处理就可以了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml……
[/Quote]
试验通过了
回复
Atai-Lu 2011-03-31
[Quote=引用 8 楼 falizixun2 的回复:]
我以为我会忽悠人,没想到还有人比我更会忽悠,不自己写代码测试就靠感觉说话!哎!杯具!
呵呵!只是给你提个建议,以后回答别人的问题最好经过测试一下,不要想到什么就说什么!以免误导他人,谢谢!
[/Quote]

我忽悠人?我不否认,楼主贴的代码我没拿来试过,但我不觉得我是在忽悠楼主。

你说说楼主贴的代码有没有用<a href="javascript:代码">123</a>
这样去执行赋值操作?他这里的赋值操作能快过这个页面上的input1的onblur吗?

如果你觉得楼主的input1的onblur能后于<a href="javascript:代码">123</a>去执行,你贴出代码看看
回复
Atai-Lu 2011-03-31
[Quote=引用 7 楼 falizixun2 的回复:]
这个例子里根本没用超级链接,但是一样#input的onblur快过了#suggest的onclick!
[/Quote]

这个问题我以前也碰到过

用onclick去执行赋值操作,onblur执行关闭
试了几个浏览器,不知道是IE6.0还是Firfox还是啥浏览器忘记了,时灵时不灵
而其它浏览器则根本没反应

你说的问题我在3楼也分析了的,后面的也只是针对楼主的问题进行补充罢了
回复
kaifadi 2011-03-31
[Quote=引用 6 楼 yhtapmys 的回复:]

嗯 看明白了 变通下吧
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
……
[/Quote]
+++
经过测试了,OK虽然不是很合楼主的意思,但是也算勉强变通完成了!
回复
kaifadi 2011-03-31
[Quote=引用 5 楼 luxu001207 的回复:]

javascript事件是先于超链接执行的,所以你通过href去执行赋值操作,根本没可能快过input1的onblur事件
[/Quote]
我以为我会忽悠人,没想到还有人比我更会忽悠,不自己写代码测试就靠感觉说话!哎!杯具!
呵呵!只是给你提个建议,以后回答别人的问题最好经过测试一下,不要想到什么就说什么!以免误导他人,谢谢!
回复
kaifadi 2011-03-31
[Quote=引用 5 楼 luxu001207 的回复:]

javascript事件是先于超链接执行的,所以你通过href去执行赋值操作,根本没可能快过input1的onblur事件
[/Quote]

真的是这样吗?JS事件是先于超链接这个说法我赞成!

但是后面的所以你通过。。这个看法,我是否定的,我个人认为它不是导致你通过href去执行赋值操作,根本没可能快过input1的onblur事件的原因,href被后执行不是导致无法执行执行的原因,这2者根本就不是一回事,例子说话,看不带超链接的例子!结果一样是无法执行赋值,说明核心原因根本不在这!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#suggest").hide();
$("#input1").focus(function () {
$("#suggest").show();
});
$("#suggest").find("li").click(function(){$("#input1").val(this.innerHTML);});
$("#input1").blur(function () {
$("#suggest").hide();

});

});

</script>
</head>
<body id="ccc">
<div>
<div id="a"><label>输入选择:</label><input id="input1" type="text" /></div>
<div id="suggest">
<ul>
<li>123</li>
<li>456</li>
</ul>
</div>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>

</body>
</html>

这个例子里根本没用超级链接,但是一样#input的onblur快过了#suggest的onclick!

回复
yhtapmys 2011-03-31
嗯 看明白了 变通下吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divSel" style=" width:160px;">
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});

// $("#input1").blur(function () {
// $("#searchKeyTip").hide();
// });

$('#divSel').mouseleave(function() {
$('#suggest').hide();
$("#input2").focus();
});

function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();
}
</script>
</body>
</html>
回复
hoojo 2011-03-31
[Quote=引用 16 楼 hch126163 的回复:]

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
var timer=null;

$("#input1").focus(function () {
if(timer!=null){clearTimeout(timer);timer=null;}
$("#suggest").show();
var showtext = "<ul ><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});

$("#input1").blur(function () {
//$("#searchKeyTip").hide();
timer = setTimeout(function(){ $("#suggest").hide();},300);
});
function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();

}
</script>
</body>
</html>

[/Quote]+
回复
veardn 2011-03-31
如果你的body足够大,可以这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
var f = false;
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});
$("#input1").blur(function () {
f = true;
});
$("body").click(function(){
if(f)$("#suggest").hide();
f = false;
});
function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();
}

</script>
</body>
</html>
回复
kaifadi 2011-03-31
不知道这样可以吗?在你的新帖里也发了该代码,请参考!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function chooseinput1(obj) { //定义内容函数,为超级连接使用!
$("#input1").attr("value", obj);
$("#suggest").hide();
}
$(function(){ //做一个页面载入处理,防止出现过早点击导致获取不到对象的情况!

$("#suggest").hide();
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul id='ul'><li><a href='javascript:chooseinput1(123)'>123</a></li>"; //增加一个UL的id为后面的事件源判断做依据
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);

});
//$("#suggest").find("li").click(function(){$("#input1").val(this.innerHTML);});


document.onclick=function(e){//进行单击事件源的判断,这里就是核心了,不一定要单击,你改为其他方式也可以,看需求而定!
var e=e||window.event
var cc=e.srcElement||e.target;
if(cc.id!="suggest"&&cc.id!="input1"&&cc.id!="ul")
//判断单击的事件源的ID是否为我们要做的选择,如果不是就让#suggest消失,否则不做任何处理,保证这个时候依然能做选择,而不是失去焦点就消失!这个判断也可以增加其他元素,能达到自己的效果即可!
{$("#suggest").hide();}
}

});

</script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>

</body>
</html>
回复
hch126163 2011-03-31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
var timer=null;

$("#input1").focus(function () {
if(timer!=null){clearTimeout(timer);timer=null;}
$("#suggest").show();
var showtext = "<ul ><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});

$("#input1").blur(function () {
//$("#searchKeyTip").hide();
timer = setTimeout(function(){ $("#suggest").hide();},300);
});
function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();

}
</script>
</body>
</html>

回复
kaifadi 2011-03-31
[Quote=引用 12 楼 luxu001207 的回复:]

引用 8 楼 falizixun2 的回复:
我以为我会忽悠人,没想到还有人比我更会忽悠,不自己写代码测试就靠感觉说话!哎!杯具!
呵呵!只是给你提个建议,以后回答别人的问题最好经过测试一下,不要想到什么就说什么!以免误导他人,谢谢!


如果觉得我在忽悠楼主,觉得我没遇到过这个问题就随便乱说一通
你可以翻翻我的博客看,是否有一篇发表于 2009年01月04日的《仿google搜索提……
[/Quote]
说了这么多,不好意思啊!
辩论嘛,斗斗嘴是正常的。但是别太激动了!我的意思是说你的5#的那个观点是不对的!javascript事件是先于超链接执行的,所以你通过href去执行赋值操作,根本没可能快过input1的onblur事件,虽然我7#的代码不能证明什么是导致这个问题的真正原因,但是至少能证明核心原因不是你所说的所以。。。,正确的在哪我想只有期待其他高手来解答了,也许我说忽悠说得太过了!只能说你把不对的观点也发出来了。如果让你生气了,我在这里表示SORRY!
回复
tuoshi 2011-03-31
还有更好的解决方法么?
回复
-布谷鸟- 2011-03-31
一贯不喜欢用JQuery,用另一种思路去解决,而且还做了扩充,希望对LZ有所帮助:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">< / script>
</head>
<body onmousedown="down1()">
<div id=myid style="border:1;background:#DDDDEE;">
<p><label>输入项20:</label><input id="input1" type="text" /></p>
<div style="display:none;" id="suggest1"></div>
<p><label>输入项21:</label><input id="input2" type="text" /></p>
<div style="display:none1;" id="suggest2"></div>
<p><label>输入项22:</label><input id="input3" type="text" /></p>
<p><label>输入项23:</label><input id="input4" type="text" /></p>
</div>
</span>
</body>
<SCRIPT>
function o(n)
{
this.n = n;
this.sa = new Array();
var ss = "suggest"+this.n;
var id1 = document.getElementById(ss);
this.html=function(){
var s = "<ul>";
for(var i=0;i<this.sa.length;i++)
{
s+="<li style='cursor:hand;' onclick='input"+this.n+".value=\""+this.sa[i]+"\";input"+this.n+"_hide();'>"+this.sa[i]+"</li>";
}
s+="</ul>";
id1.innerHTML = s;
}
}

var myobj = new o(1);
myobj.sa = ["111","222","333","444"];
myobj.html();
var myobj = new o(2);
myobj.sa = ["123","234","456","678"];
myobj.html();

function input1_show(){suggest1.style.display="block";}
function input1_hide(){suggest1.style.display="none";}

function input2_show(){suggest2.style.display="block";}
function input2_hide(){suggest2.style.display="none";}

function input1.onfocus(){input1_show();}
function input2.onfocus(){input2_show();}

function down1(){
var e = event;
if (e.srcElement.parentNode.parentNode.id != "suggest1")
{
input1_hide();
}
if (e.srcElement.parentNode.parentNode.id != "suggest2")
{
input2_hide();
}
}

</SCRIPT>

</html>

回复
by theforever_csdn:
给$("#suggest")加上mouseover和mouseout事件处理就可以了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<p><label>输入选择:</label><input id="input1" type="text" /></p>
<p id="suggest"></p>
<p><label>输入项二:</label><input id="input2" type="text" /></p>
</div>
<script type="text/javascript">
$("#suggest").mouseover(function(){$("#suggest").show();});
$("#suggest").mouseout(function(){$("#suggest").hide();});
$("#input1").focus(function () {
$("#suggest").show();
var showtext = "<ul><li><a href='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a href='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
});
$("#input1").blur(function () {
//$("#searchKeyTip").hide();
});
function chooseinput1(obj) {
$("#input1").attr("value", obj);
$("#suggest").hide();
}
</script>
</body>
</html>
回复
发动态
发帖子
Ajax
创建于2007-09-28

5.2w+

社区成员

Web 开发 Ajax
申请成为版主
社区公告
暂无公告