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

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>
...全文
258 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
Mr-Jee 2011-04-03
  • 打赏
  • 举报
 回复
何须这么麻烦 onclick => onmousedown就可以了

onclick 先于 onblur
但是onblur 先于onclick
碧海情天-赵亮 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()，停止传递，就没问题的了，各浏览器你都可以测试一下
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>

碧海情天-赵亮 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>
加载更多回复（6）
Elasticsearch 5.4新闻搜索项目实战视频教程
本课程基于Java开发，通过项目案例的方式讲解Elasticsearch分布式搜索引擎（Elasticsearch索引）中的核心技术，ES的版本为5.4，学员学习本课程以后可以初级实现类似百度新闻搜索项目。 ElasticSearch是一个基于...
vue+element模拟百度搜索(输入建议)
1、页面部分 fetch-suggestions 是一个返回输入建议的方法属性，在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中. 2、变量定义初始化部分： data() { return { // 供应商表格...
element的el-autocomplete带输入建议搜索+搜索匹配文字高亮显示（三种方法）
方法一：使用v-html替换掉相应的输入文字 <el-autocomplete class="inline-input mt-2" v-model="activity_name" auto-complete="off" :fetch-suggestions="querySearch" :placeholder="$t('m.content....
QLineEdit配合QIntValidator限制整数输入遇到的问题
QLineEidt配合QIntValidator限制整数输入遇到的问题 我因为一开始就使用了QLineEdit，所以后面搜索限制输入整数、小数都是搜的QLineEdit。结果发现大多数搜索结果表明，用QIntValidator对QLineEdit还是能起到一定...
关于vue+elementui 做类似于百度搜索功能
关于vue+elementui 做类似于百度搜索功能 当时做的时候不清楚elementui中有这个功能，自己手动写了这个功能，后来发现一个bug，又改用了elementui的 autocomplete 是一个可带输入建议的输入框组件。 例案一：自己...
Ajax

52,797

社区成员

25,305

社区内容

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

加载中

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

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

+ 用AI写文章