CODEWITHSUNDEEP
jquery
Edi Wang
Edi Wang

Reputation: 3637

Old code not working with jQuery 1.9

I have a piece of code which works fine under jQuery 1.7 or 2.0, but not working under jQuery 1.9. the list become empty when the page is loaded.

The function is used to filter a list, as the user input text, the list will be changed.

HTML:

<input type="text" id="keyword" />

<ul>
    <li>fa</li>
    <li>abc</li>
    <li>bcd</li>
    <li>def</li>
</ul>

JS:

$("#keyword").keyup(function () {
    $("ul li").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup();

For example, when user input "a", the list will be "fa, abc", when user input "bc", the list will be "abc, bcd".

I've created a demo here: http://jsfiddle.net/nmVfq/2/

How can I change this script to make it work under jQuery 1.9?

Upvotes: 1

Views: 91

Answers (2)

Amit
Amit

Reputation: 15387

Try this

$("#keyword").keyup(function () {
    if($(this).val()==""){
        $("ul li").show();
        return
    }
    $("ul li").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup();

Demo

Upvotes: 1

becquerel
becquerel

Reputation: 1131

You call keyup() just after you bind the keyup-event. Maybe :contains has changed between versions so an empty parameter is not a match? I did not find any information about that, but I can't look more just now.

Try adding an if statement to check if the value is empty, and show all items if it is.

$("#keyword").keyup(function () {
    if( $(this).val() == '' ) {
      $("ul li").show();
    } else {
     $("ul li").hide().filter(":contains('" + ($(this).val()) + "')").show();
    }
}).keyup();

Upvotes: 2

Related Questions