Hiding/showing elements on input change

Question

I am working on dynamic search.

When I write in the #search input, I want to hide the div #Main and display the div #search_list. And when I delete what i wrote in the search bar by pressing Ctrl+A & Backspace, the #search_list should hide and the #Main div should be displayed again.

Right now, when I press Ctrl+A & Backspace, the div #search_list is not hidden.

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

Tyler · Answer 1 · 2018-04-17T18:06:53.037

1

Cory had the right idea, the logic is still wrong though. If you notice in your if/else, both blocks of code are hiding the #Main div and showing the #search_list div.

You just need to swap the hide and show methods in your if block.

Edit: As blex pointed out, you want to cancel any pending request before requesting a new one. So add a variable, req, that will save each request, than before your if/else, abort that req, if it exists.

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

edited Apr 17 '18 at 18:06

answered Apr 17 '18 at 17:52

Tyler

1,029
1
8
20

On the right track, but not enough. `$.get()` is asynchronous ;-) He also needs to [abort the request](https://stackoverflow.com/a/4163992/1913729) if `str == ''`, otherwise, the wrong divs will show again after the results come back from the server – blex Apr 17 '18 at 17:53
Just realized the typo. Whoops. – Cory Kleiser Apr 17 '18 at 17:55
@blex he isn't making the request if the str is empty though. That is inside the else statement. – Tyler Apr 17 '18 at 17:58
No, but the previous request might still be pending. I'll show you an example in a minute – blex Apr 17 '18 at 17:59
yes the problem is the previous request still show :( – mil bird Apr 17 '18 at 18:02
@milbird I have fixed this per blex's comment – Tyler Apr 17 '18 at 18:07
@blex I think I understood your comment, let me know if the updated answer is what you were thinking – Tyler Apr 17 '18 at 18:08
1

Exactly! (sorry for the delay, I was trying to make a JSFiddle example, but couldn't figure out how to make `$.get` work on there). +1! – blex Apr 17 '18 at 18:12

score 0 · Answer 2 · answered Apr 17 '18 at 18:13

i figured out the problem and here is the code that worked for me ,, thanks for who helped me

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

            });
        }
    });
});

I think @Tyler's answer is better. It will cancel useless requests. Also, your solution will cause this if the network is slow: You type "Hello", the results display. You then delete your search bar, and type something again: the "Hello" results will display again for a short time while the new request is pending — blex, Apr 17 '18 at 18:15

score -1 · Answer 3 · answered Apr 17 '18 at 17:49

-1

On keypress event find the length of val and also bind change, paste and focus events Imagine if some one paste some text.

answered Apr 17 '18 at 17:49

Picks Prabhakar

335
1
3
13

Hiding/showing elements on input change

3 Answers3