Simple jquery find and show based on string search - cannot make it work

Question

Jquery:

  //Jquery-JS search for actors and directors
  //Hide extra Actors
  $(".actor ul li").not($(".actor ul li").slice(0,11)).hide();
  //
  function find_and_unhide (keyword,container) {
    $(container+':contains("'+keyword+'")').show();
  }
  find_and_unhide("fra",".actor ul li");

Html:

<div class="option-combo actor">
<h4>Actor →</h4>
<ul class="filter option-set" data-filter-group="actor">
<li><a href="#filter-actor-any" data-filter-value="" class="selected">Any</a></li>
<li><a href="#filter-actor-sandro" data-filter-value="sandro">Sandro</a></li>
<li><a href="#filter-actor-barbara" data-filter-value="barbara">Barbara</a></li>
<li><a href="#filter-actor-ku" data-filter-value="ku">Ku</a></li>
<li><a href="#filter-actor-cool" data-filter-value="cool">Cool</a></li>
<li><a href="#filter-actor-aid" data-filter-value="aid">Aid</a></li>
<li><a href="#filter-actor-leo" data-filter-value="leo">Leo</a></li>
<li><a href="#filter-actor-john" data-filter-value="john">John</a></li>
<li><a href="#filter-actor-kvara" data-filter-value="kvara">Kvara</a></li>
<li><a href="#filter-actor-kuku" data-filter-value="kuku">Kuku</a></li>
<li><a href="#filter-actor-bubu" data-filter-value="bubu">Bubu</a></li>
<li style="display: none;"><a href="#filter-actor-fra" data-filter-value="fra">Fra</a></li>
</ul>
</div>

1. Find and Unhide function doesn't work.
2. I'm also wondering if I should use data-filter-value instead of contains to select correct li. But which one will be faster?
3. Also How do i implement fuzzy matching?

Answer 1

I would do something like this to fix your find and unhide function:

function find_and_unhide (keyword,container) {
    $(container).find('[data-filter-value="' + keyword + '"]').show();
}

I definitely think searching on the data attribute would be both faster and be more extensible in the long term, however, especially since you narrow down the DOM that needs to be searched I imagine the performance difference will be negligible either way. I personally think its cleaner to use the data attribute.

Don't know much about fuzzy matching, but maybe this question will give you a starting point : Getting the closest string match