javascript - 按数据属性中匹配的关键字对列表进行排序

Question

我有一个很长的列表，其中包含基本的 JavaScript 搜索。搜索功能使用正则表达式来测试是否满足某些条件，并隐藏那些不满足的条件。我正在尝试对列表进行排序，并优先考虑在属性 1 中找到的项目，然后是在属性 2 中匹配关键字的项目。场景如下所述。

我的列表

• 巧克力焦糖
• 大蒜蛋黄酱
• 番茄鸡蛋
• 炒鸡蛋

当前 - 当我搜索 egg 时，它返回如下列表

• 大蒜蛋黄酱
• 番茄鸡蛋
• 炒鸡蛋

目标 - 这就是我正在寻找的结果

• 炒鸡蛋
• 番茄鸡蛋
• 大蒜蛋黄酱

<小时/>

从列表中我们可以看到，Garlic Mayonnaise没有Egg在其产品标题中，但搜索返回 true，因为 egg在data属性中找到，如下所示。

<li productname="Garlic Mayonnaise" data-desc="Contains egg">Garlic Mayonnaise</li>

有什么方法可以按标题中找到的关键字和数据属性中找到的关键字对列表进行排序吗？

我的搜索功能如下

let productList = $('#productListUL li');
$.each(productList, function(_index, product){
    let self                        = $(product),
        productId                   = self.attr('productid'),
        productName                 = self.attr('productname'),
        productDesc                 = self.attr('data-desc');

        if (
            regex.test(productId) ||
            regex.test(productName) ||
            regex.test(productDesc)
        )
        {                        
            self.removeClass('hidden');
        }  
        else{
            self.addClass('hidden');
        }

});

Answer 1

您可以简单地利用操作顺序。这意味着在列表中进行两遍，它会给你你想要的结果。

$(function() {
  function sortList(d, lObj) {
    var c = [];
    $.each(d, function(k, p) {
      c.push($("li", lObj).eq(p.index).detach());
    });
    lObj.append(c);
  }

  function filterList(q, lObj, s) {
    q = q.toLowerCase();
    // Optional perimeter
    if (s == undefined) {
      s = false;
    }
    // Get List Items
    var ls = lObj.children();
    // Hide them all
    ls.addClass("hidden");
    // Array for Filtered/Sorted results
    var results = [];
    // First Pass, Filter by Name
    ls.each(function(i, p) {
      if ($(p).data("name").toLowerCase().indexOf(q) > -1) {
        results.push({
          index: $(p).index(),
          name: $(p).data("name"),
          desc: $(p).data("desc"),
        });
        $(p).removeClass("hidden");
      }
    });
    console.log("P1", results);
    // Second Pass, filter by Desc
    // Skip any already unfiltered
    ls.each(function(i, p) {
      if ($(p).hasClass("hidden") && $(p).data("desc").toLowerCase().indexOf(q) > -1) {
        results.push({
          index: $(p).index(),
          name: $(p).data("name"),
          desc: $(p).data("desc"),
        });
        $(p).removeClass("hidden");
      }
    });
    console.log("P2", results);
    // Array is built with desired filter and sort due to order of operations
    // Check if Element Sort is required
    if (s) {
      sortList(results, lObj);
    }
    // Return Filtered/Sorted Array
    return results;
  }

  $(".filter").keyup(function() {
    $(".hidden").removeClass("hidden");
    if ($(this).val().length > 2) {
      filterList($(this).val(), $(".productList"), true);
    }
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Search: <input type="text" class="filter">
<ul class="productList">
  <li data-name="Chocolate Caramels" data-desc="Contains dairy">Chocolate Caramels</li>
  <li data-name="Garlic Mayonnaise" data-desc="Contains egg">Garlic Mayonnaise</li>
  <li data-name="Tomato Egg" data-desc="Contains egg">Tomato Egg</li>
  <li data-name="Scrambled egg" data-desc="Contains egg">Scrambled egg</li>
</ul>

过滤本身不会对列表中的元素进行排序，因此请根据我们构建的数组创建另一个函数来执行此操作。这会将它们分离并按顺序将它们放置在列表的末尾，并且所有其他项目都被隐藏。