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:
- How can i correct the multiple selector to include :contains so i know for future
- 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:
