我在尝试为基本数据集创建 jquery 实时搜索功能时遇到了一些问题？

Question

我正在我正在开发的网站上的一个小部件中设计一个简单的 jquery 实时搜索功能。我借用了一些我找到的代码，它运行良好。问题是，而不是使用这样的列表：

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

我正在使用这样的列表：

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

如您所见，我要搜索的文本位于 p 标签中。我使用的功能是搜索所有其他内容（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.livesearch.js 文件

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();
});
}
}
};

我相信问题出在这里：

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

它只是使用它在 li 标签之间找到的任何内容作为搜索词来与输入到文本输入字段中的字符串进行比较。搜索功能确实有效，但似乎找到了太多匹配项并且并不具体，因为我也在使用 quicksilver.js 搜索功能来匹配根据分数相似的术语。当我从 li 列表（a href、img、div 等）中删除所有其他内容时，搜索功能完美运行。如果有人对此有任何解决方案，我会非常感激，我尝试过类似的方法：

返回 this.children('p').innerHTML 但它不起作用，我可以使用 PHP、C++、C# 等，但对 javascript 和 Jquery 完全没用，它们对我来说就像外语！

Answer 1

在jquery.livesearch.js文件中我相信你可以替换这一行：

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

与：

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

这样livesearch 插件将只搜索列表中的段落标签。

您需要更改 .show()/.hide() 行以反映您正在尝试显示父 <li> 元素，因为您现在正在选择子 <p> 元素：

变化：

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