Question

Story so far….

Hello Stackoverflowers, me again! Right, im learning JQuery at the moment and i want to build a “search as you type” AJAX/JSON control. So off vie gone into JSFiddle to build a skeleton function and build on it, learning as i go. You have helped me in the past few days so thank you:

JQuery – Using Selector :contains – Weird Results

JQuery – Iterating JSON Response

Now im moving onto only showing the selected list items that match the input.

“so whats your problem now..” i here you groan! (and yes rlemon i have my eBook now!) 🙂

JQuery nOOb problem part 3: Multiple Selectors.

Ive been using the JQuery Multiple Selectors API guide so i understand how to include multiple selectors, but my issue is that mine isn’t selecting anything, i.e. :contains is not finding anything. Is this incorrect, ive used JSLint and it has parsed correctly with no errors:

$("li[id^='live'] li:contains('" + this.value + "')").show();

My full JSFiddle code is here but i have included it for ease as well:

http://jsfiddle.net/garfbradaz/JYdTU/88/

$(document).ready(function() {
var $input = $("#livesearchinput"),
    filled = false;
$.ajaxSetup({
    cache: false
});
$input.keyup(function(key) {
    if (!filled) {
        filled = true;
        $.getJSON("/gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) {
            var $ul =
            $('<ul>').attr({
                id: "live-list"
            }).appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                    $('<li>').attr({
                        id: "live-" + val
                    }).append(val).appendTo($ul).hide();
                });
            });
        });
    }

    var n = 0;

    if (this.value !== "") {
        n = $("li:contains('" + this.value + "')").length;
        n2 = $("li[id^='live'] li:contains('" + this.value + "')").length;
        console.log("1. value of n2 equals " + n2 + " : " + this.value + "end");


    }
    else {
        n = 0;
    }

    if (n <= 0) {
        $('li[id ^= "live"]').hide("slow");
        console.log("1. value of n equals " + n + " : " + this.value + "end");
    }

    if (n > 0) {
        $("li[id^='live'] li:contains('" + this.value + "')").show();
        console.log("2. value of n equals " + n + " : " + this.value + "end");
    }


});

});​

What ive done is put a console.log n2 is always 0, and here is the f12 log for proof:

So my question are:

1. How can i correct the multiple selector to include :contains so i know for future
2. Should i even use :contains, or should i approach it differently and use .filter()? Before posting i was researching this issue and found a nice stack answer detailing the use of this:

JQuery Contains Selector – Multiple Text Items

Answer 1

In your case you only need to combine two selectors: li id starts with and li contains. The similar part of each selector is li, so start with li and add the other two.

$("li[id^='live']:contains('" + this.value + "')").length;

http://jsfiddle.net/JYdTU/89/

I only updated one line to make the console output correctly, you’ll have to go through the fiddle and update the rest.