主页

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

tuoshi 2011-03-31 10:40:06

帖子在Ajax技术区：
http://topic.csdn.net/u/20110330/21/75802380-23fc-4f82-b4bd-9172e9e69cb9.html

帮忙看下，再追加200分……

...全文

17 条回复

Mr-Jee 2011年04月03日

何须这么麻烦 onclick => onmousedown就可以了

onclick 先于 onblur
但是onblur 先于onclick

http://blog.csdn.net/cj205/archive/2011/03/25/6277208.aspx

回复点赞

碧海情天-赵亮 2011年04月03日

$(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()，停止传递，就没问题的了，各浏览器你都可以测试一下，见原贴（http://topic.csdn.net/u/20110330/21/75802380-23fc-4f82-b4bd-9172e9e69cb9.html） 27楼

回复点赞

kaifadi 2011年04月02日

[Quote=引用 10 楼 cuckoo1 的回复:]

本贴的主要问题在于,当焦点脱离输入项1时,有不同的处理方式:当光标落入suggest区时不能隐藏suggest,而当光标落于其它地方时,要隐藏suggest.而这种结果是onblur事件所无法解决的!因此需要引入其它的事件处理!
其实对于onmouseover及onmouseout事件,本人感觉用户的体验不是很好,因为可能不是用户主动要求显示的内容,造成屏幕内容产生不期望的抖动……
[/Quote]
请看看你所引入的onmousedown事件和2#的document.onclick事件源方法在原理上有本质区别吗？分析完了以后，再把你的代码放火狐浏览器里执行看看有效果吗？

回复点赞

-布谷鸟- 2011年04月01日

稍加修改,请hnxxwyq再试试...

<!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>

回复点赞

菊子 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
#suggest {
width: 200px;
display:block;
outline:none;
}
</style>
</head>
<body>
<div>
<p>
<label>
输入选择：
</label>
<input id="input1" type="text" /></p>
<a id="suggest" tabindex="0">
</a>

<p>
<label>
输入项二：
</label>
<input id="input2" type="text" />
</p>
</div><script type="text/javascript">
$("#input1").focus(function(){
$("#suggest").show();
var showtext = "<ul><li><a onclick='javascript:chooseinput1(123)'>123</a></li>";
showtext += "<li><a onclick='javascript:chooseinput1(456)'>456</a></li></ul>";
$("#suggest").html(showtext);
$("#suggest").focus();
});
$("#suggest").blur(function(event){
$("#suggest").hide();
});
function chooseinput1(obj){
$("#input1").attr("value", obj);
$("#suggest").hide();
}
</script>
</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日

修改了一部分代码！效果可以根据具体情况而变！核心原理就是做事件源判断来达到预期的效果！





<!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>

回复点赞

lazyboy_wu 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 close = null;

        $("#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();

			

			// 设定关闭标志

			close = true;



			// 这里添加一个鼠标移动事件，用来阻止延迟关闭

			$("#suggest").mouseover(function(){			

				if(close == true) close = false;

			}).mouseleave(function(){			

				// 想自动隐藏内容的话，这句可以启用

				// hideSearch();		

			});



			// 这里添加一个延迟关闭

			setTimeout(hideSearch, 500);



        });

        function chooseinput1(obj) {

            $("#input1").attr("value", obj);

            hideSearch();

        }

		function hideSearch() {



			// 只要不是明确声明阻止关闭，都执行关闭

			if(close != false) {

				// 清除事件

				$("#suggest").unbind('mouseleave').unbind('mouseover');

				$("#suggest").hide();

			}

			

			close = null;

		}

    </script>

</body>

</html>

回复点赞

haa17 2011年03月31日

记录学习。

回复点赞

lazyboy_wu 2011年03月31日

[Quote=引用 10 楼 cuckoo1 的回复:]

本贴的主要问题在于,当焦点脱离输入项1时,有不同的处理方式:当光标落入suggest区时不能隐藏suggest,而当光标落于其它地方时,要隐藏suggest.而这种结果是onblur事件所无法解决的!因此需要引入其它的事件处理!
其实对于onmouseover及onmouseout事件,本人感觉用户的体验不是很好,因为可能不是用户主动要求显示的内容,造成屏幕内容产生不期望的抖动……
[/Quote]

麻烦你按下tab实验下，你这叫用户体验很好。。。

回复点赞

-布谷鸟- 2011年03月31日

本贴的主要问题在于,当焦点脱离输入项1时,有不同的处理方式:当光标落入suggest区时不能隐藏suggest,而当光标落于其它地方时,要隐藏suggest.而这种结果是onblur事件所无法解决的!因此需要引入其它的事件处理!
其实对于onmouseover及onmouseout事件,本人感觉用户的体验不是很好,因为可能不是用户主动要求显示的内容,造成屏幕内容产生不期望的抖动.对于时间延时方案,我也觉得不是好的解决方式,因为延时很难把握,而且使用得程序变得复杂化.
本人引入onmousedown事件,很好地解决了这个问题;而且对原贴做了扩展,以适应更多的复杂环境.
本人一贯不太习惯于用Jquery,以下是直接用javascript写就的结果.楼主可以参考一下.

<!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>

回复点赞

kaifadi 2011年03月31日

[Quote=引用 1 楼 hnxxwyq 的回复:]

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 ……
[/Quote]
+++
看了这么多代码，觉得把时间延时的思路处理办法相对简单，而且用户体验也比较好！这里暂时不讨论变体版，反正都是基于时间延时这个原理解决问题的，暂时统称为延时处理，我的方法虽然脱离了这个思维，方法是根据事件源来判断的，虽然效果也一样，但是代码显得比较罗嗦！所以我个人认为到现在为止，最好的解决方案应该是==>时间延时处理！第一个提出的是好样的，GOOD，值得学习！

回复点赞

hoojo 2011年03月31日

都可以~

回复点赞

碧海情天-赵亮 2011年03月31日

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>

回复点赞

发动态

发帖子

JavaScript

创建于2007-09-28

加入

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript

社区公告

暂无公告