Question

jQuery对我来说很难理解。每次我必须使用它时，我最终都会阅读几个小时的文档来实现任何目标。我正在使用此代码（可以进行实时编辑）。

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

<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仍然可见。这就是问题。我不想保留samsun g .com只是因为在某些时候它有一个“g”。我想只返回span 开始的元素和某个字符串。实际上，这就是我想要重现的东西。

我输入“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

您的indexOf函数检查找到的索引是否大于或等于0.将其设置为等于0以检查字符串的开头：

{
return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) == 0;
}

演示：http://codepen.io/anon/pen/japcB

Answer 2

创建新的: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处理程序事件中添加自定义选择器（在每个键盘上）。我把它移到了开始。

Answer 3

我已经在这里看到了几个答案。让我抛出另一个选项..从搜索文本中获取值并创建正则表达式模式，并在列表元素中查找该模式。我不是专家但是背后这就是我想到的。希望这有助于某人：）

在jQuery中更改if语句

3 个答案: