Question

I am designing a simple jquery live search function within a widget on a site i’m developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:

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

I am using a list like this:

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

As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:

//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>

also here is the jquery.livesearch.js file I am using

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

I believe the problem lies here:

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

it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:

return this.children(‘p’).innerHTML but it doesn’t work, I’m ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they’re like foreign languages to me!

Answer 1

In the jquery.livesearch.js file I believe you can replace this line:

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

with:

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

This should make it so the livesearch plugin will only search the paragraph tags in your list.

You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:

Change:

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

To:

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