Отличный поиск, спасибо автору, ток ньюанс в том что при поиске идёт учет регистра , но если в методе search - (val) заменить на (RegExp(val,"gi")), то всё будет тип топ)Может кому то понадобится). Автору видеоб лайк!
Если в списке тупо слова - сойдет. Но в общем случае, пользователь вообще не знает, что такое регулярка. Введет какой-нибудь спец-символ (*+?$^.), и попадет в ступор. Если правда не нужно учитывать регистр, можно записать: function includes(str, substr) { return str.toLowerCase().includes( substr.toLowerCase() ); }
нет тех слов благодарности, которые я мог бы написать вам, чтоб вы реально поняли насколько эти видео бывают полезны. Благодарность. Остальное можно догуглить.
Добрый день, может быть не совсем по тему листа, но все же. нашел несколько анл каналы об использовании линтеров для проверки провильности написания javascript и css, такие как eslint и csslint каптул настройку плагина VC и Gulp. Коечто понял вроде проверяет, но есть и некотрые непонятки - нашел некоторые видео, файлы, в которых прописаны настройки .eslintrc.yml ли .eslintrc.json. но целостной картины по настройки этих плагинов нет. В ру сегменте эту тему обходят. Я в вашем видео слышал, что вы непротив того, чтобы вам подсказывали новые темы для записей видео-уроков, я думаю что эта тема будет очень интресна для новичков изучающих этот язык. кроме того, существуют несколько версий: ES6/2015, ES7/2016, ES8/2017 и как настроить eslint под проверку языка. тем более там будут отличия в синтаксисе. Спасибо
Очень полезное видео, облегчило половину работы. Я зотел бы узнать о томкк можно сделать такое же для онлайн магазиа чтобы поиск шел по карточкам , а не по словам. Заранее спасибо за ответ. Еще разогромное спасибо за такой полезный туториал
Спасибо за интересный урок.Полезная вещь. У меня есть идея: небольшой парсер на чистом js, который бы копировал например погоду и выводил ее на мой сайт.
Неплохо, неплохо...особенно способ подсветки. Довольно изящно. Только зачем так бояться исправлять косяки? Ну что может быть не так, если бэкграунд не применился?..почему хотя бы на секунду не заглянуть в цсс, чтобы проверить? Обычная ошибка с автокомплитом...bottom: pink; Очень полезно, когда прямо в записи автор исправляет свои мелкие ошибки, вместо того, чтобы теряться от не примененного свойства цсс.
Здравствуйте. А как писать на Javascript если например у нас есть 4 -5 полей и если любому одному из них заполнить то пусть ищет его если ни одно не заполнено то должен выводить "надо заполнить хоть одну полю"
Видео полезное, использовал по работе. Но есть и критика. Непонятно, зачем использовать метод search, который, как выясняется, воспринимает вводимый юзером текст как текст регулярки. И это при наличии нормального метода indexOf. В итоге мне пришлось долго биться с тем, почему в строке типа '123456' ваш метод находит подстроку '3+'. Весь search стоит поменять на indexOf, и поведение этого модуля станет ближе к ожидаемому.
А можно сделать отдельный файл со всеми услугами к примеру (отдельно список поиска) чтоб не тратить производительность серверов и сайт не грузился сильно если список допустим из 1к слов и более И как это можно сделать?
Подскажите пожалуйста, у меня поиск работает хорошо, только не могу разобратся как сделать чтобы таблица с вариантами была видна не всегда, а только тогда когда я начинаю писать в строке поиска текст, как это кодом прописать?
@@itgid там еще проще. Через ajax можно делать sql запрос и добавить limit, чтоб много всего вдруг не вывело + чувствительности к регистру нет. За идею большое спасибо
Добрый день,увидел похожий урок на английском канале о живом поиске,там сделано через поиск индекса первого символа, не могли бы вы разъяснить как там сделать? урок очень быстрый и не займет много времени. 15:21 / 17:45 ruclips.net/video/G1eW3Oi6uoc/видео.html
Добрый день! Видео просто чудесное! Однако у меня вопрос, можно ли вообще использовать код с подобных видео? Или необходимо согласовывать это с автором? По идее, если кто-то учит чему-то другого, то он дает право использовать этот материал? Просто интересно. Спрашивал у других людей, но они не знают.
Отличный урок! Спасибо огромное! Александр, а не могли бы Вы, сделать поиск + небольшой фильтр с помощью регулярных выражений. Думаю аудитория поддержит эту идею)
Привет, хочу спросить. Вот я делаю сайт по типу Музыки. И я делаю блоки верез Div вместе с исполнителем. Тоесть блок внутри которого исполнитель. И у меня порядка 100 блоков таких в html файле. Как сделать чтобы можно было найти одного исполнителя среди ста?
@@bloodCayman зачем php? если делать, то делать все на js. Да и сложности тянуть все с бд нету. Добываешь данные, рендеришь страницу, и производишь поиск
Видео просто супер! Спасибо! Но есть вопрос, скрипт при поиске ищет точное совпадение, т.е. O и o для него разные вещи и отбор не происходит. Как сделать что бы скрипт не делал разницы?
Спасибо, я надеялся увидеть этот вопрос вообще с самого начала - даже в видео когда я ищу Lorem видно что срабатывает на большой символ. Я бы либо переходил к regexp либо то что вводит пользователь и то что написано в строке перед сравнением переводил в toLowerCase()
Если бы автор не юзал класс HIDE, то проверка не нужна была бы Достаточно инлайново скрывать элементы elem.textContent.toLowerCase().search(currentValue) === -1 ? elem.style.display = 'none' : elem.style.display = null;
Уважаемый Александр я нашел причину почему тег марк не менял свой фон когда вы указали цвет пинк. потому что визуал кода вместо бэкграунда поставил боттом.
Спасибо за видео, очень помогли)) подскажите пожалуйста, а если вообще совпадений не найдено, как написать код, чтобы вывести блок с соответствующим сообщением, а если совпадения обнаружены - скрыть его? понимаю, что это наверно очень легко реализовать, но я пока новичок в js.
Как приспособить код, чтобы пользователь мог вводить в поиск и большими и малыми буквами, и наш код выдавал результат не смотря на размер буквы. Сложно правильно сформулировать, но суть в том, что у меня на сайте названия товаров со стилем ttu(text-transform: uppercase;), то есть прописаны онли большими буквами, и мне нужно сделать чтобы пользователь мог вводить в поисковик это название как с больших так и с маленьких букв, и находить товар. К примеру есть у меня модель RT70, и если я ввиду в поиск rt70 то он мне его не найдёт, найдёт только если напишу прям как в названии RT70, к тому же даже если у меня написано название rt70 с маленьких букв и к нему применено свойство css text-transform: uppercase; то всё равно нужно вводить в поиск с капслока, маленькие буквы не видит. Как это можно исправить, реализовать?
Здрасте я сделал поиск на сайте но работает только на заголовок. У меня инет магазин шаблон от bootstrap. Я указал на карточку товара id='card' но при поиске выдает только заголовок товара. Неисчезает блоки которые несоответсвует. А соответствующие буквы заголовка находит.
Привет, а если мне нужен такой поиск, который бы работал помимо обычного текста, внутри инпута. Такой способ как в видео не подойдет, если у кого-нибудь есть идеи напишите
А можешь подсказать, как использовать этот 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;) Буду очень благодарен! ;)
Отличный поиск, спасибо автору, ток ньюанс в том что при поиске идёт учет регистра , но если в методе search - (val) заменить на (RegExp(val,"gi")), то всё будет тип топ)Может кому то понадобится). Автору видеоб лайк!
Благодарочка за комент
регулярки - сила! спасибо, так бы долго пришлось поискать!
Если в списке тупо слова - сойдет. Но в общем случае, пользователь вообще не знает, что такое регулярка. Введет какой-нибудь спец-символ (*+?$^.), и попадет в ступор. Если правда не нужно учитывать регистр, можно записать:
function includes(str, substr) {
return str.toLowerCase().includes( substr.toLowerCase() );
}
@@optimusprime9456 От лица всех автоботов - спасибо
@@optimusprime9456, Добрый день! Пожалуйста, подскажите, в какой момент кода нужно вставить данные строчки
16:48 вместо "bottom: pink" надо было написать "background: pink", на видео просто сработало автозаполнение
А что будет если написать "color: pink"???
@@ProFilosovich изменит цвет текста
Но вроде не просто background, а background-color)
@@странствие без разницы
нет тех слов благодарности, которые я мог бы написать вам, чтоб вы реально поняли насколько эти видео бывают полезны. Благодарность. Остальное можно догуглить.
Искал везде, но только у вас на канале нашёл. И все понятно объясняете. Спасибо огромное!!!🔥👍👍
Спасибо большое(еще не досмотрел видео), но уже хочу написать благодарность, потому что уже ответили на мои главные вопросы по этой задаче!
Спасибо за ваши уроки! Всегда мотивируете учить JS.
Рад, спасибо!
Спасибо Вам, Александр! Всё четко и без воды)
а где страничка с примером?? перехожу по ссылке, там только курсы открываются
Благодарю! Очень помог Ваш урок при выполнении тестового задания.
Так где пример кода этого урока?
Спасибо, очень интересно рассказано!
Спасибо. Просто гениально и трудно для меня очень.
Чел, ты просто спаситель
Добрый день, может быть не совсем по тему листа, но все же. нашел несколько анл каналы об использовании линтеров для проверки провильности написания javascript и css, такие как eslint и csslint каптул настройку плагина VC и Gulp. Коечто понял вроде проверяет, но есть и некотрые непонятки - нашел некоторые видео, файлы, в которых прописаны настройки .eslintrc.yml ли .eslintrc.json. но целостной картины по настройки этих плагинов нет. В ру сегменте эту тему обходят. Я в вашем видео слышал, что вы непротив того, чтобы вам подсказывали новые темы для записей видео-уроков, я думаю что эта тема будет очень интресна для новичков изучающих этот язык. кроме того, существуют несколько версий: ES6/2015, ES7/2016, ES8/2017 и как настроить eslint под проверку языка. тем более там будут отличия в синтаксисе. Спасибо
Плиз сделай двух языках сайт при нажатие. JavaScript
Постараюсь! Предложения - закидывайте - ссылка под видео!
@@itgid ++
10:22 подсветка подстроки
Очень полезное видео, облегчило половину работы. Я зотел бы узнать о томкк можно сделать такое же для онлайн магазиа чтобы поиск шел по карточкам , а не по словам. Заранее спасибо за ответ. Еще разогромное спасибо за такой полезный туториал
Я не увидел как сделать, чтобы оставшиеся варианты можно было бы выбрать мышкой или стрелками на клавиатуре.
Спасибо за интересный урок.Полезная вещь. У меня есть идея: небольшой парсер на чистом js, который бы копировал например погоду и выводил ее на мой сайт.
А как сделать, так, что бы предметы поиска (Lorem, dolor, sit) не было видно ?
display: none;
Большое спасибо, просто и понятно.
А как сделать что бы регистр букв не имел значения?
добавить метод, который будет приводить к нижнему регистру вводимую и искомую строки
@@holodu Подскажешь как?
@@botch6751 искомый результат и найденный приводить к одному и тому же регистру при сравнении.
Неплохо, неплохо...особенно способ подсветки. Довольно изящно. Только зачем так бояться исправлять косяки? Ну что может быть не так, если бэкграунд не применился?..почему хотя бы на секунду не заглянуть в цсс, чтобы проверить? Обычная ошибка с автокомплитом...bottom: pink; Очень полезно, когда прямо в записи автор исправляет свои мелкие ошибки, вместо того, чтобы теряться от не примененного свойства цсс.
Вообще ничего не понимаю, второй урок, пишу код и он не работает, причём не показывает ошибки. Консоль пустая, что делать?
присылать код, чтобы видеть проблему. скорее всего опечатка в методах получения содержимого дом.
Спасибооо!!!! От души 💚
Здравствуйте. А как писать на Javascript если например у нас есть 4 -5 полей и если любому одному из них заполнить то пусть ищет его если ни одно не заполнено то должен выводить "надо заполнить хоть одну полю"
а как сделать с карточкой товара, спасибо огромное за видео!
Спасибо за урок.
Есть ли у вас урок о рекурсии ?
Или не хотите записать?
А какой код сверху в css?
Видео полезное, использовал по работе.
Но есть и критика.
Непонятно, зачем использовать метод search, который, как выясняется, воспринимает вводимый юзером текст как текст регулярки.
И это при наличии нормального метода indexOf.
В итоге мне пришлось долго биться с тем, почему в строке типа '123456' ваш метод находит подстроку '3+'.
Весь search стоит поменять на indexOf, и поведение этого модуля станет ближе к ожидаемому.
не знаю прочтешь или нет через сколько лет , но в конце был не бегроунд а Боттом)
Спасибо
@@itgid не за что)
Как изменить чувстительность к регистру? 🙃
При вводе "В" и "в" находит разные элементы.
в js есть метод .toLowerCase()
Не работает почему-то у меня, печалька(
Можно добавить функцию UpperCase/ LowerCase
согласен. По хорошему - нужно преобразовывать.
Подскажите пожалуйста как сделать поик товаров?
А можно сделать отдельный файл со всеми услугами к примеру (отдельно список поиска) чтоб не тратить производительность серверов и сайт не грузился сильно если список допустим из 1к слов и более
И как это можно сделать?
Почему Visual Studio, а не phpstorm например?
А как сделать поиск только по ссылкам которые есть на сайте ?
ДА ДА про карточку товара ПЖЛСТ !
Спасибо огромное
Спасибо!
поиск должен работать, без учёта регистра символов
Подскажите пожалуйста, у меня поиск работает хорошо, только не могу разобратся как сделать чтобы таблица с вариантами была видна не всегда, а только тогда когда я начинаю писать в строке поиска текст, как это кодом прописать?
попробуйте всем элементам присвоить класс hide с display:none
Спасибо, полезное видео
Каким образом адаптировать живой поиск, если нужно отскать и подсчитать ссылки? Через .getElementsByTag()?
не подскажите, какой у вас микрофон?
trim() не работает
Александр, поиск отличный, но если начинаешь искать из нескольких тысячь товаров, он просто зависает на некоторое время. Как можно это исправить?
Константин Сурин делать через базу данных.
@@itgid сам сайт у меня на php. А хотел поиск без перезагрузки.
@@КонстантинСурин-ы9ы AJAX
@@КонстантинСурин-ы9ы AJAX решает проблему.
@@itgid а Вы не хотите снять видео с поиском на ajax?)
А где ссылка на исходный код?
добрые уроки
Интересно, получится ли у меня объединить это с php, чтоб был полноценный поиск. Если получится, отпишусь
легко получится.
@@itgid там еще проще. Через ajax можно делать sql запрос и добавить limit, чтоб много всего вдруг не вывело + чувствительности к регистру нет. За идею большое спасибо
Добрый день,увидел похожий урок на английском канале о живом поиске,там сделано через поиск индекса первого символа, не могли бы вы разъяснить как там сделать? урок очень быстрый и не займет много времени. 15:21 / 17:45 ruclips.net/video/G1eW3Oi6uoc/видео.html
Добрый день! Видео просто чудесное! Однако у меня вопрос, можно ли вообще использовать код с подобных видео? Или необходимо согласовывать это с автором? По идее, если кто-то учит чему-то другого, то он дает право использовать этот материал? Просто интересно. Спрашивал у других людей, но они не знают.
не выглядело как
Працювати! =))
Лайк, подписка, бубенцы)
спасибо
Не работает
подскажите а как можно живой поиск на react.js реализовать с помощью функции includes?
а если у меня 10.000 слов по которым надо искать?
то вы делаете по другому. В видео указано на ограничения. Не забывайте что это фронт.
@@itgid спасибо что объяснили. Вы случайно не знаете с помощью чего можно это реализовать? только с помощью php?
@@yusufbeky4527 вам в любом случае нужна база данных для этого. И средство общения с ней. Например php, node, python
@@itgid у меня и так есть бд и я делаю все через php просто там никак не реализуется живой поиск думал на js можно
Что-за сеньеры 200к+ дизлайков наставили?
200к + ? 200 тысяч? там всего 13
@@АндрейБочарников-х5ъ 200к зп я имею ввиду)
Все плохо, оно не работает, зря только время потратил
Можно працювати, кста.
Отличный урок! Спасибо огромное! Александр, а не могли бы Вы, сделать поиск + небольшой фильтр с помощью регулярных выражений. Думаю аудитория поддержит эту идею)
так есть. Зайдите на главную страницу канала
Огромное вам спасибо!!!!
Доброе утро, Александр.
Ваши уроки просто море удовольствия. Всегда просто и понятно. С Вами и JS не страшен :)
Спасибо и за отзыв и за комментарий!
А ссылки то не работают ((
Привет, хочу спросить. Вот я делаю сайт по типу Музыки. И я делаю блоки верез Div вместе с исполнителем. Тоесть блок внутри которого исполнитель. И у меня порядка 100 блоков таких в html файле. Как сделать чтобы можно было найти одного исполнителя среди ста?
Александр, посдкажите как действовать в такой ситуации если товар интернет магазина? пытаюсь сделать но никак не получается
Мне кажется тогда нужно их добавлять в базу данных, но точно не знаю
С помощью сервера
как с базы данных бы брать этот список через Аякс какой-нибудь теперь бы понять)
@@bloodCayman зачем php? если делать, то делать все на js. Да и сложности тянуть все с бд нету. Добываешь данные, рендеришь страницу, и производишь поиск
@@flop-deb4491 Например через фаирбасю!
Лайк не глядя)всегда годные уроки)
Очень понравилось решение) ждем побольше решений для интеренет-магазинов)
Подскажите как изначально скрыть элементы списка и выводить нужные строки только при совпадении, спасибо.
Может как нибудь через массив, точно не скажу
попробуйте изначально всем элементом присвоить класс hide с display:none
А как зделать что нижний div был скрыт а когда я что-то ищу он поевлялся
А зачем нужен скрипт, если есть тег datalist и options
прямо от души
Видео просто супер! Спасибо! Но есть вопрос, скрипт при поиске ищет точное совпадение, т.е. O и o для него разные вещи и отбор не происходит. Как сделать что бы скрипт не делал разницы?
Спасибо, я надеялся увидеть этот вопрос вообще с самого начала - даже в видео когда я ищу Lorem видно что срабатывает на большой символ. Я бы либо переходил к regexp либо то что вводит пользователь и то что написано в строке перед сравнением переводил в toLowerCase()
@@itgid Все получилось. Спасибо!
Если бы автор не юзал класс HIDE, то проверка не нужна была бы
Достаточно инлайново скрывать элементы
elem.textContent.toLowerCase().search(currentValue) === -1 ? elem.style.display = 'none' : elem.style.display = null;
Отличная идея! Спасибо
you can use json data base , with json works easiest
fuse.js библиотека для создания поиска
А как сделать тоже самое, но для карточек товара?
Было бы интересно реализовать такую корзину, которая добавляла бы товары сбоку и при нажатии на модальное окно - там хранились бы все товары ...
16:48 background pink xaaxaxaxaxaxaxaxa
Уважаемый Александр я нашел причину почему тег марк не менял свой фон когда вы указали цвет пинк. потому что визуал кода вместо бэкграунда поставил боттом.
Спасибо большое. Ценю ваши комментарии, уже вижу ваш аватар как близкого знакомого!
Спасибо за видео! Подскажите, пожалуйста, как перенести результаты поиска в отдельный блок ?
А можно код
А где ссылок на сайт с кодом
Как сделать ссылку которое есть в поисковом системе. Когда нажимаю на какое-то слово пусть меня перекидает на эту страницу
Задать src наверное, в js через id
спасибо за урок
Спасибо за видео, очень помогли)) подскажите пожалуйста, а если вообще совпадений не найдено, как написать код, чтобы вывести блок с соответствующим сообщением, а если совпадения обнаружены - скрыть его? понимаю, что это наверно очень легко реализовать, но я пока новичок в js.
Дякую за ваші відео! Все дуже зрозуміло і легко сприймається інформація!
Александр, вы очень мне помогли с моим учебным проектом. Просто Большое спасибо!
Как приспособить код, чтобы пользователь мог вводить в поиск и большими и малыми буквами, и наш код выдавал результат не смотря на размер буквы. Сложно правильно сформулировать, но суть в том, что у меня на сайте названия товаров со стилем ttu(text-transform: uppercase;), то есть прописаны онли большими буквами, и мне нужно сделать чтобы пользователь мог вводить в поисковик это название как с больших так и с маленьких букв, и находить товар. К примеру есть у меня модель RT70, и если я ввиду в поиск rt70 то он мне его не найдёт, найдёт только если напишу прям как в названии RT70, к тому же даже если у меня написано название rt70 с маленьких букв и к нему применено свойство css text-transform: uppercase; то всё равно нужно вводить в поиск с капслока, маленькие буквы не видит. Как это можно исправить, реализовать?
Здрасте я сделал поиск на сайте но работает только на заголовок. У меня инет магазин шаблон от bootstrap. Я указал на карточку товара id='card' но при поиске выдает только заголовок товара. Неисчезает блоки которые несоответсвует. А соответствующие буквы заголовка находит.
Привет, а если мне нужен такой поиск, который бы работал помимо обычного текста, внутри инпута. Такой способ как в видео не подойдет, если у кого-нибудь есть идеи напишите
Здравствуйте!
Как провернуть подобное с карточками товаров?
Подскажите, пожалуйста)
а как дать hide целому блоку в котором находится элемент списка???
А можешь подсказать, как использовать этот 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;)
Буду очень благодарен! ;)
С большим количеством слов обрезает пробелы между ними
почему я сюда попал ? МНЕ надо это сделать в лакальной сити у меня локальный сайт
Мб ты ответишь, надеюсь конечно на это. Как добавить картинки, я что то не врубаюсь )
А как скрыть текст и как только начнёшь писать тебе под поиском выводит текст