Auto-complete Search Suggestions using HTML CSS & JavaScript | Instant Search JavaScript

Поделиться
HTML-код
  • Опубликовано: 10 дек 2020
  • Learn how to quickly search through data to return instant results back to the user via an input field. We'll handle no results, case sensitive and I've linked to all the source code down below.
    Links in the video:
    - codepen.io/ChrisBarberRiley/p...
    💛 Be sure to comment like and subscribe to the channel! I have plenty more videos: / @thetechteam

Комментарии • 34

  • @brandonsupinski7695
    @brandonsupinski7695 3 года назад +3

    Amazing video I dont completely understand it, but it game me stuff to figure out, thank you.

  • @manoj03h
    @manoj03h 2 года назад

    Thanks a lot you saved me i was struggling so much finally you solved my problem thankyou so much...

  • @matinkahrizi9606
    @matinkahrizi9606 3 года назад

    Man this code is just clean ! and you explain it so awesome. i honestly love it brother ♥

    • @matinkahrizi9606
      @matinkahrizi9606 3 года назад

      and i just have a question : how can i limit the results for example show only first 4 paired results in the list ?

  • @supnegi
    @supnegi 2 года назад

    thanks a ton!

  • @pinkbalem
    @pinkbalem Год назад

    Thank you!

  • @user-se8wh3oj5t
    @user-se8wh3oj5t 2 месяца назад

    Amazing Broo

  • @pavankalyanchilakalapalli5789
    @pavankalyanchilakalapalli5789 3 года назад

    Hi mate i have two search text boxes in my code can I use same logic for both search box

  • @soniinfo7005
    @soniinfo7005 Год назад

    IT WORKS THANK'S

  • @sluggerrrrrr
    @sluggerrrrrr Год назад +1

    I am new to coding. Been taking courses and studying hard, also trying to implement what I learn into small projects. I understand every single line of this code, all good. All I'm wondering is how did you come up with all this by yourself and does it just come naturally with time ?

  • @slimsyd2421
    @slimsyd2421 2 года назад

    Lets say I want to click on the first result. How would I have that content be auto displayed into the search bar? Then have it's href changed aswell?

  • @HoaNguyen-wu4jf
    @HoaNguyen-wu4jf 2 года назад

    The video sound is pretty good, beyond my imagination

  • @miiihaaas
    @miiihaaas Год назад

    and if we want to click on item form list, it should fillin item's name into the inputbox... any hint for this?

  • @linfordaboagye2270
    @linfordaboagye2270 3 года назад +2

    Hey, well done making this. Just a quick question - Would you happen to know how to limit the results so that there is a limit of let's say - 5 results?

    • @yulyachernomorskaia3506
      @yulyachernomorskaia3506 Месяц назад

      results = searchable.filter((item)=>{return item.toLowerCase().includes(input.toLowerCase())}).slice(0,5);

  • @lexaeterna8893
    @lexaeterna8893 2 года назад

    Hello, how can i make it the search keywords in any order? for ex. item or string= "RUclips Facebook Twitter Sample"
    If I search "Facebook RUclips", then it will appear on suggestions and any other items that will match.

  • @andromeda-bl4fi
    @andromeda-bl4fi 3 года назад

    Does it search for results from multiple pages of same website??

  • @chriseffects6956
    @chriseffects6956 2 года назад

    Thankyou...but please can you show how to create a redirection link to a page within the same website when an article is been searched on the search box.

  • @mohammedkamran7649
    @mohammedkamran7649 3 года назад +1

    Bestest

  • @michaelkitson840
    @michaelkitson840 2 года назад

    Great tutorial, thanks.
    Anyone managed to change the script so it searches within an object? So eg searching a list of recipes you can return a recipe by searching for a cuisine rather than the name itself

  • @maiminhtam7735
    @maiminhtam7735 2 года назад

    Character In the video It's great, I like it a lot $$

  • @meghanatatavolu9097
    @meghanatatavolu9097 Год назад

    How to display the message as "no results found" if no data found

  • @user-yg6rp1xh7v
    @user-yg6rp1xh7v 2 года назад

    「あなたのコンテンツはとても感動的です」、

  • @Amal-zz3gl
    @Amal-zz3gl 2 года назад +1

    Can u create a new video
    Href (HYPERLINK) TEXT SEARCH BOX WITH SEARCH SUGGESTIONS

  • @olthexsheu6537
    @olthexsheu6537 2 года назад

    Hello thanks for the video, but what if I want to add links to the filtered suggestions, please help I want to add links to them

    • @mayuu_
      @mayuu_ Год назад

      if you have been found a solution can you tell me how you do please ?

  • @gitam-er8ri
    @gitam-er8ri 3 года назад

    cant we link the search results to our web pages

    • @TheTechTeam
      @TheTechTeam  3 года назад

      Not sure what you mean sorry?

  • @ufdarafat88
    @ufdarafat88 Год назад

    Sir please add click each item has different link

  • @akihiko99
    @akihiko99 3 года назад +2

    Can it search accross all website?

    • @codeentries5257
      @codeentries5257 3 года назад +1

      Yes!! Definitely

    • @mohammedkamran7649
      @mohammedkamran7649 3 года назад

      Just add database
      And remove
      Array

    • @blackmaster5091
      @blackmaster5091 3 года назад

      @@codeentries5257 how ?

    • @blackmaster5091
      @blackmaster5091 3 года назад

      @@mohammedkamran7649 couldn't search into the whole page if there wasnt a database ?
      is there anther way to do that ??