如何使用函数在UL中获得精确的字符串

Question

我在jquery中面临一个问题。所以我刚在这里注册。我需要你们的帮助伙计们。

我使用keyup函数来匹配ul li字符串。按照我的类型，listitems向下滚动/向上滚动到特定于li的文本。但问题是，当li有双文本时

1. 空气球
2. 气球

然后包含在气球上的函数停止。而我想要的结果是只有气球文本。

基本上，我希望搜索应该从第一个字母执行。

这是我的代码：

<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演示

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/

因此，基本上-您想要检查list项的text()属性，如果li的文本等于您的搜索值->，那么可以使用各()遍历li的属性。