Проверьте, равен ли ввод текста в div

Question

Я пытаюсь создать окно поиска, которое ищет текст на моем сайте. Прямо сейчас я пытаюсь создать функцию jquery keyup(), которая получает данные из моего окна поиска и сравнивает их с текстом в двух элементах div. Этот код, кажется, не работает так, как я намереваюсь, когда я набираю текстовое содержимое div'а Tom или Randy в поисковой строке. Результатом является console.log("ничто").

Мой HTML

<input type="text" id="searchfor">

    <div class ="name"> Tom </div>
    <div class ="name"> Randy </div>

Мой jquery

$(document).ready(function(){

      $('#searchfor').keyup(function(){

            $(".name").each(function(){
                    var $divText = $(".name").text().trim().toLowerCase();
                    var $searchInput = $("#searchfor").val().trim().toLowerCase();

                            if($searchInput === $divText) {
                           console.log("something");
                       }else{
                           console.log("nothing");
                       }


             });
      });
});

Я хочу знать, как я могу получить $searchInput равным $divText, чтобы, когда кто-то вводит Рэнди в поле ввода поиска, функция будет console.log("что-то"). Благодарю вас

Answer 1

Проблема в var $divText = $(".name").text(); будет объединять текст всей коллекции элементов.

В вашем each Вы хотите конкретный экземпляр, поэтому используйте $(this),

$('#searchfor').keyup(function() {
  // no need to get value in each iteration of loop...just store it here once
  var $searchInput = $(this).val().trim().toLowerCase();

  // within loop `this` is instance of div.name
  $(".name").each(function() {
    var $divText = $(this).text().trim().toLowerCase();

    if ($searchInput === $divText) {
      console.log("something");
    } else {
      console.log("nothing");
    }

  });
});

Это будет соответствовать, только если введено полное имя.

Если вы хотите использовать только частичное совпадение indexOf()

DEMO