使用jQuery过滤和附加匹配的文本字符串

Question

是否有可靠的方法或最佳方法来过滤文本字符串（如名称）？我一直在阅读.filter（），但在实践中我似乎无法理解它。

我有一个名单列表，需要根据上一个，中间名和名字的选择来削减。用户选择姓氏，名称更新的完整列表仅包括与姓氏匹配的名称。与中间名和姓氏相同。

（在这个例子中，我选择了“Gonzalez”作为姓氏，所以我的脚本从“所有结果”面板中抓取这些名称并克隆/将它们附加到最终搜索集）

我已经设法凑合了一些我找到匹配名称的东西并将其克隆到完整列表中，但它没有考虑中间名和姓氏 - 所有与第一个“Gonzalez”相匹配的名称都附加了，包括我不想要的变化（例如De Gonzales）。

$("a.forward").click(function (){
    if ($("#last-name").has(":contains('Gonzalez')").length) { 
        $("#final-list").find(":contains('Gonzalez')").clone(true).appendTo(".fullname");
    }
});

我很满意甚至能够展示预期的行为，因为这是一个不会用于制作的原型，但我无法弄清楚如何接近它。

Answer 1

我更改了您的代码以满足您的要求。基本上，我使用find("Gonzalez")对您要检索的元素应用了一个过滤器，以确保它们以Gonzalez,开头。

修改：我还会在添加新结果之前清除之前的结果。

您可以将姓氏更改为De Gonzalez并获得相应的结果。

这不是一个很好的方法，但它应该适用于你的演示。

＆＃13;

＆＃13;

var lastName = "Gonzalez";

$("a.forward").click(function() {
  // clear the previous results
  $('.fullname').empty();

  // find and add new ones
  if ($("#last-name").has(":contains('" + lastName + "')").length) {
    $("#final-list").find(":contains('" + lastName + "')").filter(function(index, el) {
      return $(el).text().startsWith(lastName + ",");
    }).clone(true).appendTo(".fullname");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="forward" href="#">Forward</a>
<p>Lastname list</p>
<ul id="last-name">
  <li>Gonzalez</li>
  <li>Gonzalo</li>
  <li>Gansalo</li>
  <li>De Gonzalez</li>
</ul>
<p>Fullname list</p>
<ul id="final-list">
  <li>Gonzalez, aaaaa</li>
  <li>Gonzalez, bbbbb</li>
  <li>Gonzalez, ccccc</li>
  <li>Gonzalez, ddddd</li>
  <li>De Gonzalez, aaaaa</li>
  <li>De Gonzalez, bbbb</li>
</ul>

<p>Result</p>
<ul class="fullname">
</ul>

＆＃13;

＆＃13;

＆＃13;