如何使用 Jquery 包含函数在 UL LI 中获取确切的字符串

Question

我在 jquery 中遇到了一个问题。所以，我刚在这里注册。我需要你们的帮助。

我正在使用 keyup 函数来匹配 ul li 字符串。根据 i 类型，列表项向下/向上滚动 到位于 li 的特定文本。但问题是当 li 有 double text 像

1. 气球
2. 气球

然后包含功能停在气球上。而我想要只有 Balloon 文本的结果。

基本上我希望搜索应该从第一个字母开始。

这是我的代码：

<ul>
    <li data-id="a">Air balloons</li>
    <li data-id="b">Balloons</li>
    <li data-id="l">List Items</li>
    <li data-id="i">Items</li>
</ul>

$(function(){
    $('input#search').keyup(function (e) {
        var searchValue = $(this).val();
        jQuery.expr[':'].contains = function (a, i, m) {
            return jQuery(a).text().toUpperCase()
                    .indexOf(m[3].toUpperCase()) >= 0;
        };
        var containText = $('li:contains(' + searchValue + ')');
        var id = containText.attr('data-id');
        alert(id);
    });
});

用 jsfiddle 更新

JSFIDDLE DEMO

Answer 1

如果你想要精确的文本搜索，你可以使用这样的东西：

$(function() {
  $('input#search').keyup(function(e) {
    var searchValue = $(this).val();
    if (searchValue.length == 0) {
      $('li').css('background-color', 'white');
    }
    $('li').each(function() {
      if ($(this).text().toLowerCase() == searchValue.toLowerCase()) {

        $(this).css('background-color', 'red');
        $(this).siblings().css('background-color', 'white');
        console.log($(this).attr('data-id'));

      }
    });
  });
});

此处的冗余线（着色/去除颜色）仅用于演示目的。 演示：http://jsfiddle.net/8xwchLg3/1/

所以，基本上 - 你想检查列表项的 text() 属性，用 each() 遍历 li，如果 li 的文本等于你的搜索值 -> 做你想做的事。