ここまでの話……
こんにちは Stackoverflowers さん、またまた！現在、JQuery を学んでおり、「入力と同時に検索」するAJAX/JSON コントロールを構築したいと考えています。そのため、JSFiddle にアクセスしてスケルトン関数を構築し、その上に構築して、私が行っていることを学びました。ここ数日お世話になりました。ありがとうございます。
JQuery - Selector :contains の使用 - 奇妙な結果
次に、入力に一致する選択されたリスト項目のみを表示することに移ります。
「それで、今あなたの問題は何ですか..」私はここであなたがうめきます！（そして、はい、私は今私の電子ブックを持っています！）:)
JQuery noOOb 問題パート 3: 複数のセレクター。
私はJQuery Multiple Selectors API ガイドを使用しているので、複数のセレクターを含める方法を理解していますが、私の問題は、何も選択していない、つまり:containsが何も見つからないことです。これは間違っていますか、JSLint を使用しましたが、エラーなしで正しく解析されました:
$("li[id^='live'] li:contains('" + this.value + "')").show();
私の完全なJSFiddleコードはここにありますが、簡単にするためにそれも含めました:
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");
}
});
}); </p>
行ったことは、console.log n2 が常に 0 であることです。これは、証明用の f12 ログです。
だから私の質問は：
- 複数のセレクターを修正して:containsを含めるにはどうすればよいので、将来のために知っていますか
- :contains を使用する必要がありますか、それとも別の方法で.filter()を使用する必要がありますか? 投稿する前に、私はこの問題を調査していましたが、これの使用法を詳述した素敵なスタックの回答を見つけました: