Question

我正致力于动态搜索。

当我在#search输入中写字时，我想要隐藏div #Main并显示div #search_list。当我通过按 Ctrl + A ＆amp;删除我在搜索栏中写的内容时 Backspace ，#search_list应该隐藏，#Main div应该再次显示。

现在，当我按 Ctrl + A ＆amp; Backspace ，div #search_list未隐藏。

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

Answer 1

科里有正确的想法，但逻辑仍然是错误的。如果您注意到if / else，则两个代码块都隐藏#Main div并显示#search_list 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 );
            });
        }
    });
});

Answer 2

我想出了问题，这里的代码对我有用，感谢谁帮助了我

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

            });
        }
    });
});

Answer 3

在按键事件上找到val的长度，并绑定更改，粘贴和焦点事件想象一下，如果有人粘贴一些文字。

隐藏/显示输入变化的元素

3 个答案: