Как сделать поиск на React.js. ЧАСТЬ 1. Live Search
HTML-код
- Опубликовано: 9 фев 2021
- 🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoffee.com/tymoshchuk
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
📨 Сотрудничество ► timoschuk.roman@gmail.com
📨 Business inquiries ► timoschuk.roman@gmail.com
5 минут и обьяснил доходчиво, чел ты лучший
Дай Бог тебе здоровья, бро!)
Ну просто лучший)
Рили оч круто, я когда искал как сделать поиск думал щас придется смотреть урок часовой, а тут 5 минут и все работает даже у меня с 1 раза, пасиб
Спасибо огромное! Первый опыт и тааак быстро!!! Никогда еще уроки из интернета не приносили пользу так быстро! Хотела подписаться, оказывается, уже подписана! Спасибо и успехов Вам!!!!
рад помочь)
Наткнулся на этот видос прям в нужный момент! Спасибо за быстрый и понятный туториал!!! с меня подписка.
Спасибо, очень коротки и быстро, лучший!
хороший пример фильтрации на стороне фронтенда, когда получаем сразу все данные.
Круто! Спасибо, все очень понятно и доступно
Никогда раньше не делал поисковики, на работе дали задачу, потрачено времени 15 минут и готово) спасибо 😉
Рад что кому-то это приносит пользу)
Балх как джун ва хьо?
@@user-ce9yr3my4g ву
Гениальность в простоте. Ты гений)))
Спасибо, хорошо объясняешь.
Бро очень крутоооооо!!!! ТЕБЕ от души благодарю
Братишка, ты сэкономил мне много времени и головной боли! Спасибо 😊
рад помочь)
успехов в обучении)
Мощно, спасибо!
Спасибо. Все так легко и просто оказывается))
Большое спасибо очень помогло!!❤
Отличное видео, спасибо!
Спасибо, быстро и понятно)
спасибо))
Выглядит очень просто... Спасибо, буду пробовать
От души спасибо!
Очень круто объяснили большое тебе спасибо
Спасибо за видос! Автору канала удачи!
благодарю
Супер, спасибо за видео
Быстро и понятно спасибо )))
Пожалуйста ))
Спасибо! Очень помогло!
Спасибо большое)😘
Спасибо большое)))
Спасибо, очень помогло!)
рад помочь)
Спасибо, брат!
Молодец👍🏽
Лучший!
Спасибо тебе большое
лучший
очень быстро и понятно
благодарю)
Спасибо, помогло!
Рад помочь )
круто вы молодец
Спасибо большое
большое спасибо !
очень круто всё работает спс за видео
рад помочь)
Просто отец, нереально помог
рад)
Люблю)
всё
привет, а как можно сделать чтобы когда выбираешь позицию из списка с вариантами поиска, то эта позиция добавлялась бы в строку поиска? как span
спасибо большое
Спасибо!
Буду благодарен, если в следующий раз выложишь рыбу на гитхаб...
Крутой канал!!!
благодарю)
Спасибо
Сначала сделал, потом посмотрел как тут - примерно совпало!
отличный подход)
а как делать, если вместо входящего массива, и перебора через map, сделал через props
Вау, спасибо
Надеюсь полезно )
спасибо
а можно в место includes написать find ?
Извините, а CoutryItem откуда надо брать?
спасибо!
рад помочь)
Привет, подскажи как сделать поиск только по кнопке поиска если нажимать. Чет не пойму никак((.
кращий , вдячний
дякую)
А как это ты добавляешь дивы и атрибуты с html в файл js безиспользования шаблонной строки?
Это jsx. Почитай документацию реакта
Привет! Все классно , а почему компонент CountryItem не показал? Чё там внутри )
та там внутри нет ничего интересного и полезного)
@@lets_try_js ну можешь показать пожалуйста
а что если у меня данные рендериться не через метода map()
в моем случае мне нужно создать дерево на react-d3-tree
и поисковик на него
но там все рендериться не через map()
Салют, можешь сделать этот же проект, только работало через redux?
Привет, как бороться с тем, что в хуке, который висит на обработчике OnChange хранится предыдущее значение из input? Порой это бывает важно.
не совсем понял вопрос
@@lets_try_js ну смотри, у нас же если мы выведем значение из хука, который повешен на onChange поискового input, то у нас будет значение перед последним действием (т.е. печатаем "друзья", а в переменной будет "друзь"). Как брать самое актуальное значение (чтобы было "друзья)?
@@daniilchistyakov3087 вешать Debounce с задержкой на пол сек
Подскажи пожалуйста как ты сжимаешь файлы (gzipped)? через плагин в vs code? можешь дать ссылку на лубую инфу, я ищу инфу но не могу найти в силу не хватки знания в целом, скачал tailwind теперь не знаю как сжать, посоветовали gzipped но не знаю как подключить
Не совсем понял вопрос
0:52 где import написано рядом зеленым цветом 7.2К (gzipped: 3K) как ты их сжал? подключал плагин или где нужно прописать через npm или как вообще тоже самое сделать?
@@manofsteppe179 я ничего не сжимал)
это плагин, который показывает вес подключенных библиотек просто
называется Import Cost
@@lets_try_js Спасибо!
дякую друже!!!100 комент=)
в сочетании с debounce будет выглядеть еще солиднее
Для оптимизации - несомненно
Дуже дякую за відео! Все досконало! Можно показати як правильно зробити сторінку виходу? Тобто при натиску кнопки "Вихід"
є відосік на каналі де повноцінний додаток роблю і там є ця функція
Не поверишь, на моем проекте тоже список стран и мне тоже надо искать страны по списку🤣
Удача ))
ссылку на код можно?
не осталось исходника(
А можно ссылку на весь код программы?
так а это приложение старое и не дописанное)
@@lets_try_js У меня просто вопрос. У меня есть таблица которую я маплю и вывожу данные , и одна из колонок должна фильтроваться данным методом. Как мне добавить оставшиеся данные в таблицу к этому способу или наоборот. Вот const tableElements =
[...props.school]
.map(p => );
@@MegaDimka16 ну сложно ответить, не видя весь код полностью )
а смотри, столкнулся с такой проблемой - делал пагинацию по твоему видосу, потом решил прикрутить туда поиск и вроде бы все работает, но заметил такой баг, что поиск корректно работает только на первой странице, когда выбираешь 2 и любую др страницу кроме первой, то поиск начинает вести себя оч странно.
тут может быть много причин, без кода в этом не разобраться))
@@lets_try_js ну я уже понял, в чем там дело было
Там же мы используем метод слайс,чтоб размер получить и кол-во страниц задать, а я туда передавал наш отфильтрованный массив и все ломалось
Я просто решил во время фильтрации скрывать наш исходный массив и подменять его на новый, все работает четко,ток стили поправить осталось
@@lets_try_js а ещё хотел спросить- а как вот пагинацию выделять, чтоб было выделено, какая сейчас страница?
@@STELLS541 при клике, когда мы переключаемся на ту или иную страничку пагинации, этому элементу нужно добавить класс активности
но как там у вас это реализовано, я не знаю)
@@lets_try_js а как это как раз сделать?
Я так понимаю,что надо динамически стили задавать ?
Было бы гораздо лучше если бы делался код без проблем которые я заметил. В эффекте отсутствует зависимость getCountries. И getCountries нужно обернуть в useCallback. Линтер будет ныть. Там где ты фильтруешь countries было бы отлично обернуть в useMemo и вообще разнести по компонентам это все дело. Да и index указывать в key в этом случае совсем плохо. Прими критику как если бы твое видео смотрели не новички. Было бы профессиональнее с твоей стороны :)
у кого есть код?)
толькоко не реакт)) все было хорошо на ангуляре, пока эта попса не получилась))
P.S. Извиняюсь, перепутал блогера)) но реакт овно 😀 полетят в меня камни, ведь у него большая поддержка
каждый имеет право на свое мнение, и в этом нет ничего плохого ))
@@lets_try_js 🙃
Подскажи, умоляю
А как вывести на экран информацию, что по указанному фильтру нет стран?