Блог

Главная - Вопросы по программированию - Добавление поля поиска в форме html

Добавление поля поиска в форме html

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть базовая Html-форма. Я пытаюсь создать панель поиска, которая выделяла бы метку, соответствующую этому содержимому. Вот моя ссылка на JSFiddle. Поиск не идеален. Например, при попытке поиска по ключевому First слову он выделяет все метки, которые начинаются с. F 

 $("#searchbox").keydown(function() {
        var content = $('#searchbox').val();
        if(content!== ""){
            if ($("label:contains('" content "')"))
            {
                $("label:contains('" content "')").addClass("highlight");
            } else {
                $("label:contains('" content "')").removeClass("highlight");
            }
        }
        else{
            $("label:contains('" content "')").removeClass("highlight");
        }
     }); 
       .highlight{
            border: red;
            background-color: yellow;

        } 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<div class="container">
    <br/>
  <input id="searchbox" placeholder="Enter your search term">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <div class="form-group"><label for="first">First</label><input type="text"></div>
    <div class="form-group"><label for="second">Second</label><input type="text"></div>
    <div class="form-group"><label for="third">Third</label><input type="text"></div>
    <div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
    <div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

Я новичок в jQuery и знаю, что это не чистый код. Это то, что я пробовал, ссылаясь на другие примеры.

Ответ №1:

Вы можете перебирать label элементы keyup и проверять, text включает ли значение поля поиска, и на основе этого добавлять или удалять класс.

 $("#searchbox").keyup(function() {
  const content = $('#searchbox').val().toLowerCase();
  const labels = $('label');

  labels.each(function() {
    const check = $(this).text().toLowerCase().includes(content)
    if (content.length amp;amp; check) $(this).addClass('highlight')
    else $(this).removeClass('highlight')
  })
}); 
 .highlight {
  border: red;
  background-color: yellow;
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <br />
  <input id="searchbox" placeholder="Enter your search term">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <div class="form-group"><label for="first">First</label><input type="text"></div>
    <div class="form-group"><label for="second">Second</label><input type="text"></div>
    <div class="form-group"><label for="third">Third</label><input type="text"></div>
    <div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
    <div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>