Живой поиск на JavaScript

[@MArt-lz9xu]

Доброе утро, Александр. Ваши уроки просто море удовольствия. Всегда просто и понятно. С Вами и JS не страшен :)

[@itgid]

Спасибо и за отзыв и за комментарий!

[@МаринаФедорчук-б6п]

Дякую за ваші відео! Все дуже зрозуміло і легко сприймається інформація!

[@user-gi1un8wy2z]

Отличный поиск, спасибо автору, ток ньюанс в том что при поиске идёт учет регистра , но если в методе search - (val) заменить на (RegExp(val,"gi")), то всё будет тип топ)Может кому то понадобится). Автору видеоб лайк!

[@odinokun]

Благодарочка за комент

[@ДмитрийСергиевич-з5к]

регулярки - сила! спасибо, так бы долго пришлось поискать!

[@optimusprime9456]

Если в списке тупо слова - сойдет. Но в общем случае, пользователь вообще не знает, что такое регулярка. Введет какой-нибудь спец-символ (*+?$^.), и попадет в ступор. Если правда не нужно учитывать регистр, можно записать: function includes(str, substr) { return str.toLowerCase().includes( substr.toLowerCase() ); }

[@Fenjkeee]

@@optimusprime9456 От лица всех автоботов - спасибо

[@misha021202]

@@optimusprime9456, Добрый день! Пожалуйста, подскажите, в какой момент кода нужно вставить данные строчки

[@ЕвгенийВинников-б4л]

Лайк не глядя)всегда годные уроки)

[@aleksandroff2757]

Спасибо большое(еще не досмотрел видео), но уже хочу написать благодарность, потому что уже ответили на мои главные вопросы по этой задаче!

[@windcrack8404]

Спасибо, очень полезно. Давно хотел реализовать поиск на сайте, но выдавали кучу js кода в котором путаешься, а тут все понятно и по полочкам.

[@vproger]

Искал везде, но только у вас на канале нашёл. И все понятно объясняете. Спасибо огромное!!!🔥👍👍

[@hadwayx]

Александр, вы очень мне помогли с моим учебным проектом. Просто Большое спасибо!

[@checkTM]

нет тех слов благодарности, которые я мог бы написать вам, чтоб вы реально поняли насколько эти видео бывают полезны. Благодарность. Остальное можно догуглить.

[@SashaNareykin]

Спасибо Вам, Александр! Всё четко и без воды)

[@stelsboii]

Очень понравилось решение) ждем побольше решений для интеренет-магазинов)

[@ВейсалТаштанов]

Отличный урок! Спасибо огромное! Александр, а не могли бы Вы, сделать поиск + небольшой фильтр с помощью регулярных выражений. Думаю аудитория поддержит эту идею)

[@itgid]

так есть. Зайдите на главную страницу канала

[@nikitxchshorts]

Спасибо за ваши уроки! Всегда мотивируете учить JS.

[@itgid]

Рад, спасибо!

[@WB_CREW]

такого качества видеоурока js я еще не видел, я нашел что искал, спасибо

[@ILikeDolls123]

Благодарю! Очень помог Ваш урок при выполнении тестового задания.

[@ДмитрийСергиевич-з5к]

Спасибо, Алекс! По Вашим урокам очень подтянул знания в области как фронта, так и бэка!

[@___freedom___]

Спасибо, очень интересно рассказано!

[@onewinteam]

Привет, хочу спросить. Вот я делаю сайт по типу Музыки. И я делаю блоки верез Div вместе с исполнителем. Тоесть блок внутри которого исполнитель. И у меня порядка 100 блоков таких в html файле. Как сделать чтобы можно было найти одного исполнителя среди ста?

[@ЮлияВ-ю4з]

а где страничка с примером?? перехожу по ссылке, там только курсы открываются

[@topalek]

Спасибо за урок. Вы мне просто открыли глаза на свойство innerText

[@xxx58880]

16:48 вместо "bottom: pink" надо было написать "background: pink", на видео просто сработало автозаполнение

[@ProFilosovich]

А что будет если написать "color: pink"???

[@misheld26]

@@ProFilosovich изменит цвет текста

[@странствие]

Но вроде не просто background, а background-color)

[@arturmusienko397]

@@странствие без разницы

[@Nikita-eb1tq]

Александр, посдкажите как действовать в такой ситуации если товар интернет магазина? пытаюсь сделать но никак не получается

[@yusufbeky4527]

Мне кажется тогда нужно их добавлять в базу данных, но точно не знаю

[@AnuarLife]

С помощью сервера

[@arshot4388]

Чел, ты просто спаситель

[@marinaermilova7912]

Спасибо. Просто гениально и трудно для меня очень.

[@РоманКарбышев-щ9м]

А ссылки то не работают ((

[@ДенисМаксимов-з4ш]

Спасибо! Очень полезная информация!

[@artemkuzmin1562]

Поставил себе на сайт, работает четко, спасибо!

[@скуренныйбычок]

Здравствуйте! Как провернуть подобное с карточками товаров? Подскажите, пожалуйста)

[@bekbolotibraimovmrx5412]

Так где пример кода этого урока?

[@belovedhome6450]

Здравствуйте, Александр. Подскажите пожалуйста, а если 30000 строк кода?

[@ssp2186]

Подскажите как изначально скрыть элементы списка и выводить нужные строки только при совпадении, спасибо.

[@nat767]

Может как нибудь через массив, точно не скажу

[@ДаниилБулаев-ж2з]

попробуйте изначально всем элементом присвоить класс hide с display:none

[@alikhTheOtter]

а как дать hide целому блоку в котором находится элемент списка???

[@nickkudenko]

Я не увидел как сделать, чтобы оставшиеся варианты можно было бы выбрать мышкой или стрелками на клавиатуре.

[@nodiravezov4680]

Здравствуйте. А как писать на Javascript если например у нас есть 4 -5 полей и если любому одному из них заполнить то пусть ищет его если ни одно не заполнено то должен выводить "надо заполнить хоть одну полю"

[@МагомедГадиев-э9у]

а как сделать с карточкой товара, спасибо огромное за видео!

[@Ильназ-н3з]

А как сделать тоже самое, но для карточек товара?

[@Публичныйканал-с3м]

Здрасте я сделал поиск на сайте но работает только на заголовок. У меня инет магазин шаблон от bootstrap. Я указал на карточку товара id='card' но при поиске выдает только заголовок товара. Неисчезает блоки которые несоответсвует. А соответствующие буквы заголовка находит.

[@Xpyct777]

Спасибо! буду пробовать

[@niemandflagrantior8490]

Большое спасибо, просто и понятно.

[@shortsFilmsUA]

Как изменить чувстительность к регистру? 🙃 При вводе "В" и "в" находит разные элементы.

[@gglinof]

в js есть метод .toLowerCase()

[@АлексМиллер-п4г]

как с базы данных бы брать этот список через Аякс какой-нибудь теперь бы понять)

[@flop-deb4491]

@@bloodyCayman зачем php? если делать, то делать все на js. Да и сложности тянуть все с бд нету. Добываешь данные, рендеришь страницу, и производишь поиск

[@lotvaplotol5578]

@@flop-deb4491 Например через фаирбасю!

[@Володимир-ч2щ7б]

Огромное вам спасибо!!!!

[@asshort94]

А как зделать что нижний div был скрыт а когда я что-то ищу он поевлялся

[@grantruss5238]

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

[@tima_fl4267]

А какой код сверху в css?

[@Dagrusx]

Спасибо за видео, очень помогли)) подскажите пожалуйста, а если вообще совпадений не найдено, как написать код, чтобы вывести блок с соответствующим сообщением, а если совпадения обнаружены - скрыть его? понимаю, что это наверно очень легко реализовать, но я пока новичок в js.

[@digitalturkistan1857]

Уважаемый Александр я нашел причину почему тег марк не менял свой фон когда вы указали цвет пинк. потому что визуал кода вместо бэкграунда поставил боттом.

[@itgid]

Спасибо большое. Ценю ваши комментарии, уже вижу ваш аватар как близкого знакомого!

[@SpAaTeam]

Спасибо за видео! Подскажите, пожалуйста, как перенести результаты поиска в отдельный блок ?

[@АкмалидинМадакимов]

Как сделать ссылку которое есть в поисковом системе. Когда нажимаю на какое-то слово пусть меня перекидает на эту страницу

[@nat767]

Задать src наверное, в js через id

[@coltallhellms4125]

А можно сделать отдельный файл со всеми услугами к примеру (отдельно список поиска) чтоб не тратить производительность серверов и сайт не грузился сильно если список допустим из 1к слов и более И как это можно сделать?

[@fazik28]

Плиз сделай двух языках сайт при нажатие. JavaScript

[@itgid]

Постараюсь! Предложения - закидывайте - ссылка под видео!

[@Piligrim-v1s]

@@itgid ++

[@ondrui]

спасибо, классный урок!!!

[@glebboyarshinov9312]

Вообще ничего не понимаю, второй урок, пишу код и он не работает, причём не показывает ошибки. Консоль пустая, что делать?

[@flipper-limon]

присылать код, чтобы видеть проблему. скорее всего опечатка в методах получения содержимого дом.

[@Leebary]

А где ссылок на сайт с кодом

[@nur1k874]

спасибо за урок

[@kapotonai]

Подскажите,почему transition в слайдере первый раз не срабатывает, а затем идет плавно?

[@nicearthes6170]

Привет, а если мне нужен такой поиск, который бы работал помимо обычного текста, внутри инпута. Такой способ как в видео не подойдет, если у кого-нибудь есть идеи напишите

[@babken574]

А как сделать, так, что бы предметы поиска (Lorem, dolor, sit) не было видно ?

[@Ислам-о2г]

display: none;

[@sekirogenshiro2210]

Добрый день,увидел похожий урок на английском канале о живом поиске,там сделано через поиск индекса первого символа, не могли бы вы разъяснить как там сделать? урок очень быстрый и не займет много времени. 15:21 / 17:45 kzbin.info/www/bejne/fWLIiGaFnpuopcU

[@dodajonxusnitdinov5975]

Очень полезное видео, облегчило половину работы. Я зотел бы узнать о томкк можно сделать такое же для онлайн магазиа чтобы поиск шел по карточкам , а не по словам. Заранее спасибо за ответ. Еще разогромное спасибо за такой полезный туториал

[@T.a.n.y.a.10]

Подскажите пожалуйста как сделать поик товаров?

[@ЧЕЛОВЕК-ч8ы4р]

А как сделать что бы регистр букв не имел значения?

[@holodu]

добавить метод, который будет приводить к нижнему регистру вводимую и искомую строки

[@botch6751]

@@holodu Подскажешь как?

[@holodu]

@@botch6751 искомый результат и найденный приводить к одному и тому же регистру при сравнении.

[@ixdit1979]

Видео просто супер! Спасибо! Но есть вопрос, скрипт при поиске ищет точное совпадение, т.е. O и o для него разные вещи и отбор не происходит. Как сделать что бы скрипт не делал разницы?

[@itgid]

Спасибо, я надеялся увидеть этот вопрос вообще с самого начала - даже в видео когда я ищу Lorem видно что срабатывает на большой символ. Я бы либо переходил к regexp либо то что вводит пользователь и то что написано в строке перед сравнением переводил в toLowerCase()

[@ixdit1979]

@@itgid Все получилось. Спасибо!

[@lazyevilhazard]

Каким образом адаптировать живой поиск, если нужно отскать и подсчитать ссылки? Через .getElementsByTag()?

[@2010Sheb]

Что делать если количество элементов в массиве ответа слишком много?Возможно стоит выводить частями?

[@kiper3811]

А можешь подсказать, как использовать этот 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;) Буду очень благодарен! ;)

[@ДенисСопин-ж5п]

Почему Visual Studio, а не phpstorm например?

[@SerafimArk]

А как скрыть текст и как только начнёшь писать тебе под поиском выводит текст

[@BEASTGAMEFREE]

Мб ты ответишь, надеюсь конечно на это. Как добавить картинки, я что то не врубаюсь )

[@fanatic5565]

супер годно,спасибо за урок

[@alexkardone3809]

Александр, спасибо за урок! Вопрос практического применения. Допустим ИМ на Битрикс, с тысячей товаров. Получается, при каждом вводе нужно запрос в БД делать?

[@ДаниилСаркисян-б4д]

а как найти все подстроки? если есть текст и в нем нужно найти все совпадения?

[@ВикторПродеус]

10:22 подсветка подстроки

[@IhorVasilchenko]

Добрый день, может быть не совсем по тему листа, но все же. нашел несколько анл каналы об использовании линтеров для проверки провильности написания javascript и css, такие как eslint и csslint каптул настройку плагина VC и Gulp. Коечто понял вроде проверяет, но есть и некотрые непонятки - нашел некоторые видео, файлы, в которых прописаны настройки .eslintrc.yml ли .eslintrc.json. но целостной картины по настройки этих плагинов нет. В ру сегменте эту тему обходят. Я в вашем видео слышал, что вы непротив того, чтобы вам подсказывали новые темы для записей видео-уроков, я думаю что эта тема будет очень интресна для новичков изучающих этот язык. кроме того, существуют несколько версий: ES6/2015, ES7/2016, ES8/2017 и как настроить eslint под проверку языка. тем более там будут отличия в синтаксисе. Спасибо

[@artiomaliev9200]

А зачем нужен скрипт, если есть тег datalist и options

[@DraginAnatoliy]

прямо от души

[@sweetsforsweets6488]

Добрый день ! То есть если я хочу сделать поиск только по ссылкам, то мне нужно просто указать innerHTML ?

[@БайрамРамазанов-д5к]

Спасибо, полезное видео

[@2010Sheb]

Как реализовать такой поиск с массивом?

[@sweetsforsweets6488]

А как сделать поиск только по ссылкам которые есть на сайте ?

[@kiper3811]

Как приспособить код, чтобы пользователь мог вводить в поиск и большими и малыми буквами, и наш код выдавал результат не смотря на размер буквы. Сложно правильно сформулировать, но суть в том, что у меня на сайте названия товаров со стилем ttu(text-transform: uppercase;), то есть прописаны онли большими буквами, и мне нужно сделать чтобы пользователь мог вводить в поисковик это название как с больших так и с маленьких букв, и находить товар. К примеру есть у меня модель RT70, и если я ввиду в поиск rt70 то он мне его не найдёт, найдёт только если напишу прям как в названии RT70, к тому же даже если у меня написано название rt70 с маленьких букв и к нему применено свойство css text-transform: uppercase; то всё равно нужно вводить в поиск с капслока, маленькие буквы не видит. Как это можно исправить, реализовать?

[@digitalturkistan1857]

Спасибо огромное

[@itgid]

Спасибо!

[@Alexander-pb8yf]

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

[@ДаниилБулаев-ж2з]

попробуйте всем элементам присвоить класс hide с display:none

[@ИлхамбекАрисов]

А допустим каждое название кого-то товара начинается с большой буквой, тогда же поиск не будет работать. Что тогда делать?

[@gglinof]

переводить всё в нижний регистр .toLowerCase()

[@romangoncharuk4455]

Александр, Вас приятно слушать, продолжайте, желаю Вам безграничного роста в профессии и в достатке! предлагаю тему: радиостанция на NodeJS с тремя потоками на трёх разных битрейтах с несколькими форматами передачи данных (aac, mp3, etc) с возможностью добавлять и перемешивать треки с возможностью держать где-то на каком-нибудь s3 некоторую библиотечку треков с возможностью лив-включений тема вообще широкая то ли ноде доверить формирование потока, то ли от ffmpeg получать вопрос близкий к телу наравне с рубашкой, но некоммерческий спасибо! у Вас канал не монетизирован? не видно рекламы

[@romangoncharuk4455]

если будет реклама, буду досматривать до конца

[@notIdeal78]

16:48 background pink xaaxaxaxaxaxaxaxa

[@nun8930]

Спасибо за урок. Есть ли у вас урок о рекурсии ? Или не хотите записать?

[@igorko7716]

Спасибо за интересный урок.Полезная вещь. У меня есть идея: небольшой парсер на чистом js, который бы копировал например погоду и выводил ее на мой сайт.

[@Алекс-л9щ8о]

А css файл можно?

[@tarastrasa]

Не работает почему-то у меня, печалька(

[@dimav1640]

не подскажите, какой у вас микрофон?

[@stoprocentovstoprocentov4351]

добрые уроки

[@ЧЕЛОВЕК-ч8ы4р]

А где ссылка на исходный код?

[@iskandarinsta6991]

Привет. Вы фрилансер или работаете на команде?

[@anelyaakitai6095]

можно для интернет магазина

[@my096]

поиск должен работать, без учёта регистра символов

[@pavelarseyev452]

Неплохо, неплохо...особенно способ подсветки. Довольно изящно. Только зачем так бояться исправлять косяки? Ну что может быть не так, если бэкграунд не применился?..почему хотя бы на секунду не заглянуть в цсс, чтобы проверить? Обычная ошибка с автокомплитом...bottom: pink; Очень полезно, когда прямо в записи автор исправляет свои мелкие ошибки, вместо того, чтобы теряться от не примененного свойства цсс.

[@КонстантинСурин-ы9ы]

Александр, поиск отличный, но если начинаешь искать из нескольких тысячь товаров, он просто зависает на некоторое время. Как можно это исправить?

[@itgid]

Константин Сурин делать через базу данных.

[@КонстантинСурин-ы9ы]

@@itgid сам сайт у меня на php. А хотел поиск без перезагрузки.

[@itgid]

@@КонстантинСурин-ы9ы AJAX

[@itgid]

@@КонстантинСурин-ы9ы AJAX решает проблему.

[@КонстантинСурин-ы9ы]

@@itgid а Вы не хотите снять видео с поиском на ajax?)

[@Chess-yu6ts]

Видео полезное, использовал по работе. Но есть и критика. Непонятно, зачем использовать метод search, который, как выясняется, воспринимает вводимый юзером текст как текст регулярки. И это при наличии нормального метода indexOf. В итоге мне пришлось долго биться с тем, почему в строке типа '123456' ваш метод находит подстроку '3+'. Весь search стоит поменять на indexOf, и поведение этого модуля станет ближе к ожидаемому.

[@dimitrijarchipov8622]

Можно добавить функцию UpperCase/ LowerCase

[@itgid]

согласен. По хорошему - нужно преобразовывать.

[@pravo_volyn]

you can use json data base , with json works easiest