Блог

Главная - Вопросы по программированию - Проблема в элементарной номенклатуре HTML, связанная с поиском продукта

Проблема в элементарной номенклатуре HTML, связанная с поиском продукта

#javascript #html #css

Вопрос:

Я хочу создать панель поиска товаров. Я новичок в WebDev и думаю, что неправильно понял какую-то номенклатуру или элемент. Пожалуйста, помогите мне с исправлениями и объяснениями. Я не просто ищу фиксированный код. Кроме того, мы будем признательны за помощь/ресурсы о том, как предотвратить подобные ошибки в будущем и повысить уровень владения базовой номенклатурой.

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%; 
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

</style>
</head>
<body>

<h2>Product Search</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a Product..." title="Type in a name">
<script>

function myFunction() {
    var input, input_uppercase, a, i, txtValue;
    var products= ["Headphones", "Desktops", "Laptops", "Speakers"];
    input = document.getElementById("myInput");
    input_uppercase = input.value.toUpperCase();
    for (i = 0; i < products.length; i  ) {
        a = products[i];
        txtValue = a.textContent;
        if (txtValue.toUpperCase().indexOf(input_uppercase) > -1) {
            document.write(products[i]);
        } else {document.write(); }
        }
        }   


    


</script>

</body>
</html>

Я хочу, чтобы приведенный выше код действовал как строка поиска. Пользователь будет вводить буквы, пытаясь найти товар. Ни один из продуктов не должен быть показан заранее. При каждом нажатии клавиши, если строка ввода соответствует какой-либо части строки названий продуктов, т. е. Наушников, настольных компьютеров, Ноутбуков, Динамиков, то эти продукты должны быть показаны. Например, если пользователь ищет «d», то будут показаны только продукты, содержащие строку d в какой-либо части. В данном случае наушники, настольные компьютеры. Кроме того, если пользователь ищет «de», то должны отображаться только продукты, содержащие строку «de». В данном случае только настольные компьютеры. Кроме того, я хочу, чтобы поиск не учитывал регистр.

Когда я запускаю код, я не получаю название какого-либо продукта, когда начинаю вводить символы, несмотря на совпадение с несколькими продуктами.

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

1. Пожалуйста, отредактируйте свой вопрос и предоставьте подробную информацию о проблеме, с которой вы столкнулись, о том, что вы ожидаете, и в какой момент в вашем коде это не даст вам ожидаемого результата

Ответ №1:

textContent не существует на var a . Поэтому, когда вы переходите к присвоению.textContent значению TXT, оно устанавливается в значение undefined.

Если вы проверите свою консоль, вы должны получить сообщение об ошибке:

«Неперехваченная ошибка типа: Не удается прочитать свойство «Верхний регистр «неопределенного»

Метки: ,