Question

如果Exist!字段中的字符串包含input标记内的字符串，我想显示消息li。

当我输入cccc时，Exist!消息成功出现。但是，当我输入aaaa或bbbb时，它将失败并显示Nop!。我想知道为什么。我希望有人能帮助我。

$('input').on('input', function() {
  var keyword = $(this).val();
  var targetText;
  var msg = $('#msg');
  
  if (keyword != '') {
    $('ul li').each(function() {
      targetText = $(this).text();
      if (targetText.indexOf(keyword) != -1) {
        msg.text('Exist!');
      } else {
        msg.text('Nop!');
      }
    });
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

Answer 1

问题是因为您在每个循环中都更新了文本。如果在按a之后遵循逻辑，则第一次迭代将找到包含li的{{1}}并将文本更新为aaaaaa。然后，第二次迭代将Exist!与a进行比较并失败，并将文本设置为bbbbbb。与Nop!

的最后一次迭代相同

要解决此问题，您可以改用cccccc查找输入了文本的任何元素并显示消息：

:contains()

var $msg = $('#msg');

$('input').on('input', function() {
  var keyword = $(this).val();
  var matches = $('ul li:contains("' + keyword + '")');
  $msg.text(matches.length ? 'Exist!' : 'Nop!');
});

请注意，<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text"> <div id="msg"></div> <ul> <li>aaaaaa</li> <li>bbbbbbbb</li> <li>cccccccccc</li> </ul>会进行贪心匹配，即输入:contains()将匹配aa，但也匹配aa。如果您想要完全匹配，请改用aardvark：

filter()

var $msg = $('#msg');

$('input').on('input', function() {
  var keyword = $(this).val();
  var matches = $('ul li').filter(function() {
    return $(this).text().trim() === keyword; // convert cases to have a case-insensitive match
  });
  $msg.text(matches.length ? 'Exist!' : 'Nop!');
});

Answer 2

您正在遍历所有元素并检查每个元素。因此，对于aaa，您有一个匹配项，因此您可以写出文本。然后转到下一个，但没有匹配项，因此将文本设置为“找不到”。

因此，找到匹配项后，您需要退出循环。使用jQuery的每个，您都可以使用return false。

$('input').on('input', function() {
  var keyword = $(this).val();
  var targetText;
  var msg = $('#msg');
  
  if (keyword != '') {
    $('ul li').each(function() {
      targetText = $(this).text();
      if (targetText.indexOf(keyword) != -1) {
        msg.text('Exist!');
        return false
      } else {
        msg.text('Nop!');
      }
    });
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

其他方法可以通过过滤器

$('input').on('input', function() {
  var keyword = $(this).val();
  var msg = $('#msg');
  var lis = $('ul li');
  
  if (keyword != '') {
    var lisWithText = lis.filter( function () {
      return this.textContent.indexOf(keyword) != -1
    });
    $("#msg").text(lisWithText.length ? "yes" : "no");
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

Answer 3

不要在循环（.each）内设置文本，因为它会在每个循环中被覆盖，这就是为什么最后一个句子ccccc起作用的原因，因为它是最后一个循环迭代，其他人被覆盖。

您可以使用标志变量来了解是否存在，然后在循环后检查此布尔变量并根据其设置文本。

在此示例中看看：

$('input').on('input', function() {

  var keyword = $(this).val();
  var targetText;
  var msg = $('#msg');
  var exists = false;
  
  if (keyword != '') {
    $('ul li').each(function() {
      targetText = $(this).text();
      if (targetText.indexOf(keyword) != -1) {
        exists = true;
      }
    });
    
    if (exists) {
      msg.text('Exist!');
    } else {
      msg.text('Nop!');
    }
    
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

Answer 4

您可以使用Array.prototype.some方法在回调返回true时立即返回，然后根据是否有答案来设置消息，例如，如下所示：

$('input').on('input', function() {
  var keyword = $(this).val();
  var msg = $('#msg');
  if (keyword != '') {
    var hasKeyword = Array.from( $('ul li') ).some(function( item ) {
      return item.textContent.includes( keyword );
    });
    msg.text(hasKeyword ? 'Exists' : 'Nop!');
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

此外，为简化起见，您可以使用string.prototype.includes来验证字符串是否包含子字符串

Answer 5

此代码段也可用于不区分大小写的

$('input').on('input', function() {
  var keyword = $(this).val();
  var targetText;
  var msg = $('#msg');
  
  if (keyword != '') {
  var matchfound=false
    $('ul li').each(function() {
      targetText = $(this).text();
      debugger;
      if (keyword.trim() && targetText.toLocaleLowerCase().indexOf(keyword.toLocaleLowerCase()) > -1) {
        msg.text('Exist!');
        matchfound=true;
      } 
    });
    if(!matchfound){
            msg.text('Nop!');
         }
  } else {
    msg.text('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div id="msg"></div>
<ul>
  <li>aaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccccc</li>
</ul>

搜索带有“ indexOf”的字符串失败

5 个答案: