jQuery 自动完成 - 根据自动完成结果修改 div(例如，仅显示具有匹配结果的 div)

Question

我正在寻找一种基于 jQuery 自动完成搜索结果显示/隐藏div 的方法。

这是我拥有的自动完成功能：

$('#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%') }
    })

源"服务"只是一组带有标签和值的对象。基本上，我想根据自动完成结果(显示在 .ui-menu-item 上的列表(过滤掉我的div，如下所示：之前和之后

(万一图像不起作用(我的 html 看起来像这样：

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

基本上，我想使用这个过滤函数(或类似的东西(：

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

并仅显示相关的div。例如，如果我搜索"pl"，我只想看到div"苹果"，"菠萝"和"李子"。我试图将其添加为搜索事件的一部分，但似乎不起作用。有什么方法可以在自动完成范围内做到这一点吗？

提前感谢您的回答！

Answer 1

我会

做的是这样的：

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

你可以读掉你的divs id。

然后在jq自动完成焦点中使用此搜索功能和/或选择并赋予它ui.item.label值，这可能是您要查找的值。

注意：由于您所有可能的结果都已加载到页面上，因此我看不到自动合成的意义，因为您可以像这样立即使用此搜索功能

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