Это видео недоступно.
Сожалеем об этом.

Autocomplete suggestion box

Поделиться
HTML-код
  • Опубликовано: 4 янв 2019
  • Link to prototype: kodhus.com/kodn...
    In this tutorial we are going to create the simplest autocomplete suggestion box using css and javascript

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

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

    You are just like a BOSS teacher. Thank you teacher. 😊👍

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

    The video sound is pretty good, beyond my imagination

  • @asankapradeepkumara9115
    @asankapradeepkumara9115 4 года назад +4

    Tutorial is Really cool.
    How to add a hyperlink to the list?
    Thank you.

  • @fvgoya
    @fvgoya 5 лет назад +1

    As always, really nice!! And yes, make a second part bring the data from database, please! Thank you!!!

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

    I would suggest a few subtle changes (such as using RegExp for matching), but overall a fantastic foundation and very helpful.

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

    This is a fantastic tutorial - It helped me greatly. Thank you!

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

    Fantastic video...this was incredibly helpful!

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

    I think a better event listener is 'input', it triggers when you paste content to the input field too, not only when you type.

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

      Also, I'd suggest to use 'toLowerCase' on the input too.

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

    hey, how do I make the text appear on the search panel, when i click on the suggestion ?

  • @michelecavicchioli2890
    @michelecavicchioli2890 4 года назад

    Good work i extremely needed a video like this, thank you!

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

    hey, using up/down arrows javascript?

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

    Nice, thanks sir..
    I am satisfied.

  • @patrickmutuku
    @patrickmutuku 4 года назад

    This was nice - clean succinct code. Thanks.

  • @dipalidas2717
    @dipalidas2717 5 лет назад

    Very nice man.......... superb

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

    Helped me a lot, thanks!

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

    I'm not sure why, but I cannot get this to work. I wrote exactly what you did throughout the tutorial and my javascript didn't do anything. So I just copied your code from the link in the description, and still nothing. I am working on Visual Studio Code and yes I have set up my html page correctly (with links and scripts). The html and css code works, but js is not. Do you know how to fix this?

  • @webdev8200
    @webdev8200 5 лет назад

    Can you please add a click listener too so that when we click on any suggestion it should be automatically got typed in search box as google suggestion does

  • @KanagawaMarcos
    @KanagawaMarcos 5 лет назад

    Very good tutorial. thank you.

  • @omerdavid5490
    @omerdavid5490 4 года назад

    This is amazing ! thanks a lot !

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

    how to add hyperlink on each countries?? please answer

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

    Thx for the good video. I am using it with a search bar in the navbar. How can i do it, thatthe suggestions panel overlapps the other content and not moving it?

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

      @@FrontendTips thank you so much for the quick answer, it works perfect!
      did you make any tutorials about a tags for the suggestion panel and how to connect it to a data base with ajax etc. ?

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

    "startsWith()" I can not believe it

  • @ArtOfFun
    @ArtOfFun 4 года назад

    Perfect!

  • @davidcademartori832
    @davidcademartori832 4 года назад +1

    Can you show the autocomplete with more features? Like adding a hyperlink and other information?

  • @victorialeigh2726
    @victorialeigh2726 4 года назад +3

    Hi FrontendTips, really great video.
    Somehow I can't see anything on console when I type stuff in the input area (9:58). Does anybody know the reason why?

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

      In your html you might have to include a next to your input class.

  • @yaraye5397
    @yaraye5397 4 года назад

    awesome!

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

    The primary purpose of the suggestion box should be to select suggestions. You haven't covered the primary thing.

  • @Shmack_
    @Shmack_ 5 лет назад

    Can you make the resolution higher 360p kinda hard to see

    • @optimusdebugger9638
      @optimusdebugger9638 5 лет назад +2

      you need to change your settings using the cog icon on the bottom right of your screen, the video is available in HD

  • @prateek5908
    @prateek5908 4 года назад

    can you make a video with handlebars js?

    • @prateek5908
      @prateek5908 4 года назад

      @@FrontendTips I have to create a autocomplete search bar using handlebars js for a task I am given in my intership. The one that I have created is using simple html and xhr. But I have to create it using handlebars js.

    • @prateek5908
      @prateek5908 4 года назад

      @@FrontendTips Right , it is very old template engine but have to do it and in a very short time.
      Thank you for your valuable feedback.

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

    Argentina 🇦🇷 pa

  • @optimusdebugger9638
    @optimusdebugger9638 5 лет назад

    another way to compare string in lowercase is using RegExp('^' + regexEscape(country), 'i').text.input(input)

    • @optimusdebugger9638
      @optimusdebugger9638 5 лет назад

      @@FrontendTips I totally agree with you. I also think that simpler is better. I like your videos and am always excited to see one (yes because I receive notification whenever you post). I was just letting you know. I thought it may be of some use anytime soon in the future.
      Keep it up!
      By the way we missed you

  • @user-on8jd7tk3t
    @user-on8jd7tk3t 3 года назад +1

    Armenia 😂😎😎

  • @dipalidas2717
    @dipalidas2717 5 лет назад

    On clicking on suggestions it should fill textbox right........u didn't mention about that....... make another videos on that

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

    Armenia ❤️❤️❤️ 🇦🇲🇦🇲🇦🇲

  • @YenNguyen-si9wj
    @YenNguyen-si9wj 2 года назад

    the sound is not good I am quite disappointed

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

    CovidImages need to be invested more than half19

  • @PhuongNguyen-dv6cn
    @PhuongNguyen-dv6cn 2 года назад

    The video sound is pretty good, beyond my imagination

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

    The video sound is pretty good, beyond my imagination