Detect if input has text every keypress jQuery

Question

For those who can't wait, Fiddle :)

I am developing this kind of logic and I know I will be using jQuery for this but the problem is I don't know how to do such thing or to start it.

I want everytime I type something on the input or the input has text I want the .search-dropdown will be shown. Also even if I copy & paste something on the input the .search-dropdown will also be shown. How do I do it ? I don't really know how to do it in jQuery :( Forgive me for it I'm still a newbie in jQuery world.

For better example just like the search bar in facebook everytime I type the search results will be shown :). Thanks in advance for your time and your answers :) Have a good day Sir/Mam.

By is my CSS and HTML code:

CSS:

.search-here{
    width: 100%;
    height: 30px;
    border: 1px solid #000;
    padding: 5px 10px
}

.search-dropdown{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ececec;
    border-radius: 2px;
    margin-top: 5px;
    display: none;
}

.search-dropdown a{
    display: block;
    padding: 5px;
    border-bottom: 1px solid #dddddd;
    text-decoration: none;
    color: #000;
}

HTML:

    <div class="box-a4">
      <form>
        <input type="text" placeholder="Search" class="search-here">
        <div class="search-dropdown">
                <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
                <a href="#">Dolorum a aperiam nemo ex fuga esse at expedita sed quo sequi voluptas labore.</a>
                <a href="#">Dolorum a aperiam nemo ex fuga esse at expedita sed quo sequi voluptas labore, nihil assumenda quidem dolore illo, consequuntur neque quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
        </div>
      </form>
    </div>

Thank you :)

indeed I can't waith for jsfiddle, but there is no js code... — Mivaweb
– Mivaweb, Commented May 26, 2015 at 9:47
Yes there is no js code for I don't know how to do it :) Forgive me for that. Thanks — John
– John, Commented May 26, 2015 at 9:52

Milind Anantwar · Accepted Answer · 2015-05-26 10:18:21Z

3

You can use:

$('input').on('input',function(){
  $('.search-dropdown').toggle(this.value.length > 0);
});

Working Demo

edited May 26, 2015 at 10:18

answered May 26, 2015 at 9:49

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

empiric Over a year ago

the dropdown will be hidden every second character.

John Over a year ago

This works great but I want that the search results will be permanently be shown even if I type something on the input because as what I notice the search results will hide everytime I type :) Can you show to me how it will be done Sir ? :) Thanks. Anyway thank you for this

A. Wolff Over a year ago

What about pasting some text? I would use input event

Milind Anantwar Over a year ago

@A.Wolff: change event will handle that

A. Wolff Over a year ago

@MilindAnantwar It would once input loses focus, not sure this is expected behaviour

|

Yasitha · Accepted Answer · 2015-05-26 10:07:32Z

1

You can use keyup and on functions. Demo

$( document ).ready(function() {
    $('.search-here').keyup(function() {
        if($('.search-here').val() == ""){
          $('.search-dropdown').hide();
        } else {
          $('.search-dropdown').show();
        }
    });    

    $('.search-here').on('paste', function () {
        $('.search-dropdown').show();
    }); 
});

edited May 26, 2015 at 10:07

answered May 26, 2015 at 9:51

Yasitha

2,3034 gold badges25 silver badges39 bronze badges

1 Comment

John Over a year ago

This works but what if the input don't have text ? The search results don't hide :) But anyway thank you for your time sir.

Captain Kenpachi · Accepted Answer · 2015-05-26 10:03:07Z

0

$(".search-here").on("change",function(){
    //code to show auto-complete dropdown goes here
})
$(".search-here").on("keyup",function(){
    $(this).trigger("change");
})

The above code will allow you to do something anytime the text inside the textbox changes.

edited May 26, 2015 at 10:03

answered May 26, 2015 at 9:49

Captain Kenpachi

7,2458 gold badges50 silver badges71 bronze badges

2 Comments

Mivaweb Over a year ago

Explain wath you are doing with this code so that its clear to understand

Barmar Over a year ago

change doesn't run on every keypress, it runs when they leave the input field.

Collectives™ on Stack Overflow

Detect if input has text every keypress jQuery

3 Answers 3

8 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related