将字符串与每个 li 元素进行比较

Question

我想将输入与 li 元素进行比较，但由于某种原因，它只检查最后一个 li 元素。你可以在下面运行脚本时看到这一点，所有带有“test”的东西都可以正常工作，但对于“example”或“example 2”则不行

$(document).ready(function() {
    var $input = $('#autocomplete');
    $(document).on('keyup', $input, function() {
        var $val = $input.val().trim(),
            $select = $('.autocomplete-content');

        // Check if the input isn't empty
        if ($val != '') {
            $select.children('li').each(function() {
                var $li = $(this),
                    $html = $li.html(),
                    $text = $li.text().trim();

                // Set input value
                $li.click(function() {
                    $input.val($text);
                });

                // Check if the value has at least 1 match else hide
                if ($text.indexOf($val) !== -1) {
                    // Remove class hide when input changes and finds a match
                    if ($li.hasClass('hide')) {
                        $li.removeClass('hide');
                    }

                    // Unhide "ul.autocomplete-content"
                    if ($select.hasClass('hide')) {
                        $select.removeClass('hide'); // Show options
                    }
                } else {
                    $li.addClass('hide');
                    $select.addClass('hide'); // Hide options
                }
            });
        } else {
            $select.addClass('hide');
        }
    });
});

.hide {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">

<ul class="autocomplete-content hide">
  <li><img src="test.jpg"> example</li>
  <li><img src="test.jpg"> example 2</li>
  <li><img src="test.jpg"> test</li>
</ul>

所以我的问题是如何将输入与每个 li 元素进行比较。提前致谢。

更新

我忘了提到的是，li 元素中可能是img，这就是我使用$li.text() 的原因

Answer 1

您可以尝试使用伪选择器:contains，而不是在输入中输入任何内容时循环遍历所有li。这会找到我们提供的文本的所有元素，如果您的意图是找到以搜索字符串开头的元素，那么您可能需要即兴发挥一点。 This thread 可能会有所帮助。

$(document).ready(function() {
  var $input = $('#autocomplete');
  $(document).on('keyup', $input, function() {
    var $val = $input.val().trim(),
        $select = $('.autocomplete-content');
    // Check if the input isn't empty
    if ($val != '') {
      $select.children('li').addClass('hide')
      $select.children('li').filter(function() { 
      	console.log($(this).text().indexOf($val))
      	return $(this).text().indexOf($val) !== -1; 
      }).removeClass('hide');
    } else {
      $select.children().addClass('hide');
    }
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">

<ul class="autocomplete-content">
  <li class="hide"><img src="test.jpg"> example</li>
  <li class="hide"><img src="test.jpg"> example 2</li>
  <li class="hide"><img src="test.jpg"> test</li>
</ul>

Answer 2

需要删除$select.addClass('hide');。当输入不匹配 test 时调用它，即使它可能匹配 example。

$(document).ready(function() {
    var $input = $('#autocomplete');
    $(document).on('keyup', $input, function() {
        var $val = $input.val().trim(),
            $select = $('.autocomplete-content');

        // Check if the input isn't empty
        if ($val != '') {
            $select.children('li').each(function() {
                var $li = $(this),
                    $html = $li.html(),
                    $text = $li.text().trim();

                // Set input value
                $li.click(function() {
                    $input.val($text);
                });

                // Check if the value has at least 1 match else hide
                if ($text.indexOf($val) !== -1) {
                    // Remove class hide when input changes and finds a match
                    if ($li.hasClass('hide')) {
                        $li.removeClass('hide');
                    }

                    // Unhide "ul.autocomplete-content"
                    if ($select.hasClass('hide')) {
                        $select.removeClass('hide'); // Show options
                    }
                } else {
                    $li.addClass('hide');
                    //$select.addClass('hide'); // Hide options
                }
            });
        } else {
            $select.addClass('hide');
        }
    });
});

.hide {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" class="autocomplete">

<ul class="autocomplete-content hide">
  <li>example</li>
  <li>example 2</li>
  <li>test</li>
</ul>

Answer 3

您必须将hide 类设置为li 而不是ul 在#autocomplete 的keyup 事件上遍历lis，其中一个包含文本框值，从中删除类hide并添加不包含的类hide。

$(document).on('keyup', '#autocomplete', function () {
    var text = $(this).val();

    $('.autocomplete-content li').each(function () {
        if ($(this).text().trim().indexOf(text) > -1) {
           $(this).removeClass('hide');
        } else {
           $(this).addClass('hide');
        }
    });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="autocomplete" class="autocomplete">
<ul class="autocomplete-content">
  <li class="hide"><img src="test.jpg"> example</li>
  <li class="hide"><img src="test.jpg"> example 2</li>
  <li class="hide"><img src="test.jpg"> test</li>
</ul>