Отличный поиск, спасибо автору, ток ньюанс в том что при поиске идёт учет регистра , но если в методе search - (val) заменить на (RegExp(val,"gi")), то всё будет тип топ)Может кому то понадобится). Автору видеоб лайк!
Если в списке тупо слова - сойдет. Но в общем случае, пользователь вообще не знает, что такое регулярка. Введет какой-нибудь спец-символ (*+?$^.), и попадет в ступор. Если правда не нужно учитывать регистр, можно записать: function includes(str, substr) { return str.toLowerCase().includes( substr.toLowerCase() ); }
Отличный урок! Спасибо огромное! Александр, а не могли бы Вы, сделать поиск + небольшой фильтр с помощью регулярных выражений. Думаю аудитория поддержит эту идею)
нет тех слов благодарности, которые я мог бы написать вам, чтоб вы реально поняли насколько эти видео бывают полезны. Благодарность. Остальное можно догуглить.
Привет, хочу спросить. Вот я делаю сайт по типу Музыки. И я делаю блоки верез Div вместе с исполнителем. Тоесть блок внутри которого исполнитель. И у меня порядка 100 блоков таких в html файле. Как сделать чтобы можно было найти одного исполнителя среди ста?
Спасибо за видео, очень помогли)) подскажите пожалуйста, а если вообще совпадений не найдено, как написать код, чтобы вывести блок с соответствующим сообщением, а если совпадения обнаружены - скрыть его? понимаю, что это наверно очень легко реализовать, но я пока новичок в js.
А можешь подсказать, как использовать этот js код, если у меня есть товар допустим, и поиск осуществляется через имя товара(в данном случае h3), а скрывать или показывать нужно весь товар(в данном случае всю ссылку 'a' или по классу '.content__a')? Вот пример : RT70 Беспроводная игровая мышь AL90 Лазерная игровая мышь BLAZING Как мне поставить чтоб скрывался и показывался не тот элемент в котором мы проверяем запрос ('h3'), а весь блок ('a'). document.querySelector('#input').oninput = function () { let val = this.value.trim(); let elasticItems = document.querySelectorAll('.All_products a h3'); if (val != '') { elasticItems.forEach(function (elem) { if (elem.innerText.search(val) == -1) { elem.classList.add('invis'); } else { elem.classList.remove('invis'); } }); } else { elasticItems.forEach(function (elem) { elem.classList.remove('invis'); }); } } ('invis' - название класса с display: none;) Буду очень благодарен! ;)
Добрый день, может быть не совсем по тему листа, но все же. нашел несколько анл каналы об использовании линтеров для проверки провильности написания javascript и css, такие как eslint и csslint каптул настройку плагина VC и Gulp. Коечто понял вроде проверяет, но есть и некотрые непонятки - нашел некоторые видео, файлы, в которых прописаны настройки .eslintrc.yml ли .eslintrc.json. но целостной картины по настройки этих плагинов нет. В ру сегменте эту тему обходят. Я в вашем видео слышал, что вы непротив того, чтобы вам подсказывали новые темы для записей видео-уроков, я думаю что эта тема будет очень интресна для новичков изучающих этот язык. кроме того, существуют несколько версий: ES6/2015, ES7/2016, ES8/2017 и как настроить eslint под проверку языка. тем более там будут отличия в синтаксисе. Спасибо
Очень полезное видео, облегчило половину работы. Я зотел бы узнать о томкк можно сделать такое же для онлайн магазиа чтобы поиск шел по карточкам , а не по словам. Заранее спасибо за ответ. Еще разогромное спасибо за такой полезный туториал
Здравствуйте. А как писать на Javascript если например у нас есть 4 -5 полей и если любому одному из них заполнить то пусть ищет его если ни одно не заполнено то должен выводить "надо заполнить хоть одну полю"
Александр, Вас приятно слушать, продолжайте, желаю Вам безграничного роста в профессии и в достатке! предлагаю тему: радиостанция на NodeJS с тремя потоками на трёх разных битрейтах с несколькими форматами передачи данных (aac, mp3, etc) с возможностью добавлять и перемешивать треки с возможностью держать где-то на каком-нибудь s3 некоторую библиотечку треков с возможностью лив-включений тема вообще широкая то ли ноде доверить формирование потока, то ли от ffmpeg получать вопрос близкий к телу наравне с рубашкой, но некоммерческий спасибо! у Вас канал не монетизирован? не видно рекламы
Неплохо, неплохо...особенно способ подсветки. Довольно изящно. Только зачем так бояться исправлять косяки? Ну что может быть не так, если бэкграунд не применился?..почему хотя бы на секунду не заглянуть в цсс, чтобы проверить? Обычная ошибка с автокомплитом...bottom: pink; Очень полезно, когда прямо в записи автор исправляет свои мелкие ошибки, вместо того, чтобы теряться от не примененного свойства цсс.
Видео просто супер! Спасибо! Но есть вопрос, скрипт при поиске ищет точное совпадение, т.е. O и o для него разные вещи и отбор не происходит. Как сделать что бы скрипт не делал разницы?
Спасибо, я надеялся увидеть этот вопрос вообще с самого начала - даже в видео когда я ищу Lorem видно что срабатывает на большой символ. Я бы либо переходил к regexp либо то что вводит пользователь и то что написано в строке перед сравнением переводил в toLowerCase()
Если бы автор не юзал класс HIDE, то проверка не нужна была бы Достаточно инлайново скрывать элементы elem.textContent.toLowerCase().search(currentValue) === -1 ? elem.style.display = 'none' : elem.style.display = null;
@@bloodyCayman зачем php? если делать, то делать все на js. Да и сложности тянуть все с бд нету. Добываешь данные, рендеришь страницу, и производишь поиск
Видео полезное, использовал по работе. Но есть и критика. Непонятно, зачем использовать метод search, который, как выясняется, воспринимает вводимый юзером текст как текст регулярки. И это при наличии нормального метода indexOf. В итоге мне пришлось долго биться с тем, почему в строке типа '123456' ваш метод находит подстроку '3+'. Весь search стоит поменять на indexOf, и поведение этого модуля станет ближе к ожидаемому.
Спасибо за интересный урок.Полезная вещь. У меня есть идея: небольшой парсер на чистом js, который бы копировал например погоду и выводил ее на мой сайт.
Александр, спасибо за урок! Вопрос практического применения. Допустим ИМ на Битрикс, с тысячей товаров. Получается, при каждом вводе нужно запрос в БД делать?
Здрасте я сделал поиск на сайте но работает только на заголовок. У меня инет магазин шаблон от bootstrap. Я указал на карточку товара id='card' но при поиске выдает только заголовок товара. Неисчезает блоки которые несоответсвует. А соответствующие буквы заголовка находит.
Добрый день! Видео просто чудесное! Однако у меня вопрос, можно ли вообще использовать код с подобных видео? Или необходимо согласовывать это с автором? По идее, если кто-то учит чему-то другого, то он дает право использовать этот материал? Просто интересно. Спрашивал у других людей, но они не знают.
Добрый день,увидел похожий урок на английском канале о живом поиске,там сделано через поиск индекса первого символа, не могли бы вы разъяснить как там сделать? урок очень быстрый и не займет много времени. 15:21 / 17:45 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-G1eW3Oi6uoc.html
Привет, а если мне нужен такой поиск, который бы работал помимо обычного текста, внутри инпута. Такой способ как в видео не подойдет, если у кого-нибудь есть идеи напишите
Уважаемый Александр я нашел причину почему тег марк не менял свой фон когда вы указали цвет пинк. потому что визуал кода вместо бэкграунда поставил боттом.
Подскажите пожалуйста, у меня поиск работает хорошо, только не могу разобратся как сделать чтобы таблица с вариантами была видна не всегда, а только тогда когда я начинаю писать в строке поиска текст, как это кодом прописать?
А можно сделать отдельный файл со всеми услугами к примеру (отдельно список поиска) чтоб не тратить производительность серверов и сайт не грузился сильно если список допустим из 1к слов и более И как это можно сделать?
