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

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

帮忙看下，再追加200分……
...全文
163 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
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>
自动填充功能实现-- 实例源码
博客《自动填充功能实现》网页源程序，博客地址：http://blog.csdn.net/harvic880925/article/details/29843127
vue+element模拟百度搜索(输入建议)
1、页面部分 <el-form-item label="供应商号" prop="lifnrid"> <el-autocomplete class="el-input" style="width: 545px" v-model="form.lifnrid" :fetch-suggestions="getMbLFA" placeholder="请输
vue+element UI带输入建议的输入框el-autocomplete
     之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框 但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的： companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...
QLineEdit配合QIntValidator限制整数输入遇到的问题
QLineEidt配合QIntValidator限制整数输入遇到的问题 我因为一开始就使用了QLineEdit，所以后面搜索限制输入整数、小数都是搜的QLineEdit。结果发现大多数搜索结果表明，用QIntValidator对QLineEdit还是能起到一定限制的，而QDoubleValidator则不太好限制，会需要使用QRegExpValidator。 先说结论： 如果只想输入数字（整数、小数），建议最开始就直接用QSpinBox、QDoubleSpinBox。 由于是自用，我一开始就只考虑了对部分Q
es搜索建议相关（建议词过滤，前缀、中缀匹配等）
目录 一、搜索建议介绍 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、搜索建议介绍 es中提供了几种suggest搜索建议方式 Term Suggester：补全纠错，用户输入错误的情况下返回一个正确的建议 Phrase Suggester：短语自动补全 Completion Suggester：完全补全，fst结构 Context Suggester：根据上下文补全，通常用于对第三种方式的过滤操作 对于中文而言，es..
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章