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匹配，也会调用它。

＆＃13;

$(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');
        }
    });
});

＆＃13;

.hide {
  display: none;
  }

＆＃13;

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

＆＃13;

Answer 3

您必须将班级hide设置为li而不是ul keyup #autocomplete事件li遍历hide s一个包含文本框值，从中删除类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>

sphere.name = "trololol";

比较字符串与每个li元素

3 个答案: