Javascript 在输入更改时隐藏/显示元素

我正在进行动态搜索

当我在

#search

输入中写入时，我想隐藏div

#Main

并显示div

#search_列表

。当我通过按Ctrl+A&Backspace删除我在搜索栏中写的内容时，

#search_list

应该隐藏，并且应该再次显示

#Main

div

现在，当我按Ctrl+A&Backspace时，div

#search_列表

不会隐藏

$(document).ready(function(){
    $("#search").keyup(function(){
        var str=  $("#search").val();

        if(str == '') {
             $( "#Main" ).show();
             $( "#search_list" ).hide();
        }  else{
            $.get( "{{ url('home?id=') }}"+str, function( data ) {
                $("#Main").hide();
                $( "#search_list" ).show().html( data );
            });
        }
    });
});

---

在按键事件上查找val的长度，并绑定更改、粘贴和焦点事件

---

想象一下，如果有人粘贴一些文本

科里的想法是正确的，但逻辑仍然是错误的。如果您在If/else中注意到，两个代码块都隐藏了

#Main

div并显示了

#search_列表

div

您只需要交换if块中的

hide

和

show

方法

编辑：正如blex指出的，在请求新请求之前，您希望取消任何挂起的请求。因此，添加一个变量，

req

，该变量将保存每个请求，而不是在if/else终止该请求之前（如果该请求存在）

$(document).ready(function(){
    // the req variable we will use to track if there is already an open request
    var req;
    $("#search").keyup(function(){
        var str=  $("#search").val();

        // check to make sure a req exists and it hasn't finished
        // we only want there to ever be one request, so we use the same variable for every request
        if (req != null && req.readyState != 4)
            req.abort();

        if(str == '') {
             $( "#Main" ).show();
             $( "#search_list" ).hide();
        }  else{
            req = $.get( "{{ url('home?id=') }}"+str, function( data ) {
                $("#Main").hide();
                $( "#search_list" ).show().html( data );
            });
        }
    });
});

---

我解决了问题，这是对我有用的代码，谢谢你帮助我

    $(document).ready(function(){

    $("#search").keyup(function(){
        var str=  $("#search").val();


        if(str === '') {
             $( "#Main" ).show();
           $("#search_con").hide();
           $("#search_con").hide();



        }  else{
            $("#Main").hide();
            $( "#search_con" ).show()
            $.get( "{{ url('home?id=') }}"+str, function( data ) {

                $( "#search_con" ).html( data );

            });
        }
    });
});

---

在正确的轨道上，但还不够<代码>$.get（）是异步的；-）他还需要输入if

str=''

，否则，在服务器返回结果后，会再次显示错误的div，因为服务器刚刚意识到输入错误。哎哟。@blex如果str是空的，他就不会提出请求了。这在else语句中。否，但上一个请求可能仍处于挂起状态。我马上给你举个例子！（很抱歉耽搁了，我正在尝试制作一个JSFIDLE示例，但不知道如何制作

$。在那里开始工作）+1.我认为@Tyler的答案更好。它将取消无用的请求。此外，如果网络速度较慢，您的解决方案也会导致此问题：您键入“Hello”，结果显示。然后删除搜索栏，并再次键入内容：“Hello”结果将在新请求挂起时再次显示一段时间