私は基本的なデータセットのjqueryライブ検索機能を作成しようといくつかの問題がありますか？

Question

私は開発中のサイトのウィジェット内で簡単なjqueryライブ検索機能を設計しています。私が見つけたいくつかのコードを借りて、それは素晴らしい仕事です。あなたは、私が検索するテキストはpタグである見ることができるように

<ul> 
<li> 
<a href="#"> 
<div class="something> 
<img src="something.jpg"> 
<p>Searchable Item 1</p> 
</div> 
</a> 
</li> 
etc. 

：私はこのようなリストを使用しています

<ul> 
    <li>Searchable Item 1</li> 
    <li>Searchable Item 2</li> 
etc 

：問題ではなく、このようなリストを使用してのそれにもかかわらずであります。私が使った関数は、他のすべてのもの（a href、div、img）とそれらのタグにあるテキストとpタグ内の項目を検索することです。申し訳ありませんが、私の説明が少し混乱するかもしれませんが、私はここにあなたのコードの例を示します場合：

//includes im using 
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script> 
<script type="text/javascript" src="js/quicksilver.js"></script> 
<script type="text/javascript" src="js/jquery.livesearch.js"></script> 



//document ready function 
$(document).ready(function() { 
$('#q').liveUpdate('#share_list').fo… 
}); 



//actual search text input field 
<input class="textInput" name="q" id="q" type="text" /> 



//part of the <ul> that is being searched 
<ul id="share_list"> 
<li> 
<a href="#"> 
<div class="element"><img src="images/social/propellercom_icon.jpg… /> 
<p>propeller</p> 
</div> 
</a> 
</li> 


<li> 
<a href="#"> 
<div class="element"><img src="images/social/diggcom_icon.jpg" /> 
<p>Digg</p> 
</div> 
</a> 
</li> 


<li> 
<a href="#"> 
<div class="element"><img src="images/social/delicios_icon.jpg" /> 
<p>delicious</p> 
</div> 
</a> 
</li> 
</ul> 

もここで私は、私は信じてい

jQuery.fn.liveUpdate = function(list){ 
list = jQuery(list); 

if (list.length) { 

var rows = list.children('li'), 
cache = rows.map(function(){ 
return this.innerHTML.toLowerCase(); 
}); 


this 
.keyup(filter).keyup() 
.parents('form').submit(function(){ 
return false; 
}); 
} 

return this; 

function filter(){ 
var term = jQuery.trim(jQuery(this).val().toLowerCase()), scores = []; 

if (!term) { 
rows.show(); 
} else { 
rows.hide(); 

cache.each(function(i){ 
var score = this.score(term); 
if (score > 0) { scores.push([score, i]); } 
}); 

jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){ 
jQuery(rows[ this[1] ]).show(); 
}); 
} 
} 
}; 

を使用していますjquery.livesearch.jsファイルがあります問題はここにある：

var rows = list.children('li'), 
cache = rows.map(function(){ 
return this.innerHTML.toLowerCase(); 
}); 

ちょうどそれがテキスト入力フィールドに入力した文字列と比較するために、検索語としてのliタグの間に見つけたものは何でも利用しています。検索機能は実際には機能しますが、あまりにも多くの一致を見つけたようで、スコアに似た用語に一致するquicksilver.js検索機能を使用しているため、特定ではありません。 liリスト（href、img、divなど）から他のものをすべて削除すると、検索機能が完全に機能します。もし誰かがこれに対する解決策を持っているなら、私は本当に素晴らしいと思います。

return this.children（ 'p'）。innerHTMLしかし、うまくいきません、PHP、C++、 C＃などが、JavaScriptやJqueryではまったく役に立たず、私にとっては外国語のようです！ livesearchプラグインは、あなたのリストに段落タグを検索しますので、これはそれをする必要があり

var rows = list.children('li').find('p'), 

：で

var rows = list.children('li'), 

：私はあなたがこの行を置き換えることができると信じてjquery.livesearch.jsファイルで

Answer 1

。

あなたは、あなたが今、子供に<p>要素選択されているので、あなたが親<li>要素を表示しようとしていることを反映して.show()/.hide()行を変更する必要があります。

変更：

rows.show();//1 
rows.hide();//2 
jQuery(rows[ this[1] ]).show();//3 

への：

rows.parents('li:first').show();//1 
rows.parents('li:first').hide();//2 
jQuery(rows[ this[1] ]).parents('li').show();//3