Блог

Главная - Вопросы по программированию - Как исправить ошибку jquery javascript

Как исправить ошибку jquery javascript

#javascript #html #jquery

Вопрос:

Мне нравится этот проект

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
      <input type="text" id="searchInput" onkeyup="fruitSearch()" placeholder="Search something">
  </div>
    <ul id="fruits">
        <li><a href="http://asygroups.com/product-meyveler.html">Fruits</a></li>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Legumes</a></li>
        <li><a href="#">Sauces</a></li>
        <li><a href="#">Konserve</a></li>
        <li><a href="#">ULKER Arbeni XXL</a></li>
        <li><a href="#">ULKER Arbeni super</a></li>
        <li><a href="#">ETI CIN 25GR PORTAKALLI</a></li>
        <li><a href="#">ULKER Cokokream</a></li>
        <li><a href="#">ULKER BEBE sutlu Biskuvi</a></li>
        <li><a href="#">ULKER DIDO SUTLU</a></li>
        <li><a href="#">ULKER DIDO CARAMEL</a></li>
        <li><a href="#">ULKER DIDO FRAMBUAZ AROMALI</a></li>
        <li><a href="#">ULKER DIDO TRIO</a></li>
        <li><a href="#">ETI LIFALIF YULAF EZMESI</a></li>
        <li><a href="#">ETI TUTKU</a></li>
        <li><a href="#">ETI TOPKEK MEYVELI</a></li>
        <li><a href="#">ETI PETITO GOFRET</a></li>
        <li><a href="#">ETI LIFALIF YULAF EZMESI</a></li>
        <li><a href="#">ETI SULTANI BURCAK</a></li>
        <li><a href="#">ETI PETITO POPS</a></li>
    </ul>
    <script>
        $("#searchInput").on('keyup', function() {
            var searchValue = $(this).val();
            searchAndFilter(searchValue)
        });

        function searchAndFilter(searchTerm) {
            if (searchTerm == '') {
                $("#fruits li").hide()
            } else {
                $("#fruits li").each(function() {
                    var currentText = $(this).text();
                    currentText = currentText.toUpperCase();
                    searchTerm = searchTerm.toUpperCase();
                    if (currentText.indexOf(searchTerm) >= 0)
                        $(this).show();
                });
            }
        }
        $(document).ready(function() {
            $("#fruits li").hide();
        });
    </script>
</body>
</html>

в этом случае мое окно поиска сработало неправильно. Когда я что-то ищу, это на самом деле работает неправильно. Например, когда я набираю ul, он показывает мне все слова ul, такие как язва тупой души. Это может сбить меня с толку. Когда я печатаю «язва«, он показывает мне пачку и другие подобные варианты. Существует окно поиска, в котором выполняется поиск только в одном мире. Как я могу это исправить.

Мой вывод

Комментарии:

1. ваш код выдает ошибки в консоли — разве вы не искали ошибки в консоли инструментов разработчика браузера?

2. после $(this).show(); } добавления else { $(this).hide(); } и удаления onkeyup="fruitSearch()" , так как эта функция не существует

3. ХОРОШО!!! Я попробую это сделать. Спасибо за этот совет.

Метки: