jquery - 在 jQuery 中更改 if 语句

Question

jQuery 对我来说太难理解了。每次我必须使用它时，我最终都会阅读数小时的文档，但一无所获。我正在使用此代码(可以进行实时编辑)。

http://codepen.io/anon/pen/vKFBy

它在输入文本时实时过滤记录。问题是我不想要它的搜索方法。让我解释一下。

<ul id="list">
  <li class="in"><span>google.com</span></li>
  <li class="in"><span>gmail.com</span></li>
  <li class="in"><span>samsung.com</span></li>
  <li class="in"><span>amazon.de</span></li>
  <li class="in"><span>apple.de</span></li>
</ul>

当我键入“G”或“g”(不区分大小写)时，amazon.de 和 apple.de 消失，因为它们不包含任何“G”，同时 google.com gmail.com 和 samsung.com 仍然可见。这就是问题。我不想保留 samsung.com 只是因为在某些时候它有一个“g”。我只想返回 span begins 与特定字符串的元素。实际上，这就是我要重现的内容。

我输入“G”:

<ul id="list">
  <li class="in"><span>google.com</span></li>
  <li class="in"><span>gmail.com</span></li>
  <li class="hiding out hidden"><span>samsung.com</span></li>
  <li class="hiding out hidden"><span>amazon.de</span></li>
  <li class="hiding out hidden"><span>apple.de</span></li>
</ul>

我一直在输入“Go”:

<ul id="list">
  <li class="in"><span>google.com</span></li>
  <li class="hiding out hidden"><span>gmail.com</span></li>
  <li class="hiding out hidden"><span>samsung.com</span></li>
  <li class="hiding out hidden"><span>amazon.de</span></li>
  <li class="hiding out hidden"><span>apple.de</span></li>
</ul>

我知道我应该使用的语法:

indexOf(searchTerm)

或者:

[span^="'+searchTerm+'"]

或者:

str.match(/^searchTerm/)

但我无法编辑当前的 if 语句。每次我打破剧本。

Answer 1

创建一个新的 :startswith 自定义选择器(或 :startswithi 如果您需要具体说明)并检查 indexOf 上的位置 0匹配:

http://jsfiddle.net/TrueBlueAussie/z148kzeo/

    //extends :contains to be case insensitive
    $.extend($.expr[':'], {
        'startswith': function (elem, i, match, array) {
            return (elem.textContent || elem.innerText || '').toLowerCase()
                .indexOf((match[3] || "").toLowerCase()) == 0;
        }
    });

请注意，您正在将自定义选择器添加到 keyup 处理程序事件中(在每个 keyup 上)。我把它移到了开头。