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标记中。我使用的函数是搜索所有其他东西（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列表中的所有其他内容（href，img，div等）时，搜索功能完美地运行。如果有人对此有任何解决方案我会非常高兴，我尝试过这样的事情：

返回this.children（'p'）。innerHTML但它不起作用，我对PHP，C ++，C＃等没问题但是对javascript和Jquery完全没用，它们就像我的外语！ / p>

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

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

1 个答案: