jQuery自动补全-根据自动补全结果修改div（例如，仅显示具有匹配结果的div）

Question

I'm looking for a way to show/hide divs based on the jQuery autocomplete search results.

This is the autocomplete function I have:

$('#catalogSearch .searchBox').mouseup(function (e) { e.preventDefault(); }).autocomplete({
        source: services,
        autoFill: true,
        minChars: 0,
        focus: function (event, ui) {
            event.preventDefault();    // Prevent ui.item.value from showing up
            $('#catalogSearch .searchBox').val(ui.item.label);
            return false;
        },
        select: function (event, ui) {  // Triggered when an item is selected from the menu?
            $('#catalogSearch .searchBox').val(ui.item.label);
            window.location.href = ui.item.value.find("a").attr("href");
            return false;
        },
        open: function () { $('.ui-menu').css('max-width', '100%') }
    })

The source 'services' is just an array of objects with label & value. Basically, I want to filter out my divs based on the autocomplete results (the list that shows up on .ui-menu-item) as shown here: before & after

(In case if the images don't work) My html looks like this:

<div id="catalogSearch">
...
   <input type="text" class="searchBox ui-autocomplete-input ...>
   <input id="catalogSearchSubmit" class="searchSubmit" type="submit">
...
</div>
<div class="row">
...
    <div id="product-apple">...</div>
    <div id="product-banana">...</div>
    <div id="product-cherry">...</div>
    <div id="product-melon">...</div>
    <div id="product-pineapple">...</div>
    <div id="product-kiwi">...</div>
...
</div>

And basically, I want to use this filtering function (or something like this):

var filterResults = function () {
    var results = $('.ui-menu-item');
    $('.product-list.item').hide();
    results.each(function (r) {
        $('#product-' + $(this).text()).show();
    });
};

and show only relevant divs. For example, if I search "pl", I would only want to see div "apple", "pineapple" & "plum." I tried to add it as a part of the search event but seems it doesn't work. Is there any way I can do it within the autocomplete scope?

Thank you for your answer in advance!

Answer 1

What I would do is something like this :

function search(value){
   //$(elems) == your divs selector
   $(elems).hide();
   $(elems).each(function(){
      if($(this).html().match(value)){ 
          $(this).show();
      }
   });
}

You can get read rid of your divs id.

Then use this search function inside jq autocomplete focus and/or select and give it ui.item.label value, which might be the value you're looking for.

Note : As all your possible results are already loaded on page, I don't see the point of autocomp as you can get this search function to work instantly like this

$('.searchBox').keyup(function(){ search( $(this).val() ) }