1

For example, when you open up your chrome browser and start typing a known url: www.google.com The browser autofills the url after u put in the first letter, when you press enter it opens the google website but your also able to keep typing for different urls. When the browser knows another url and you keep typing another letter after the g(oogle.nl) it autofills another known url.

What is the best way to achive this functionality in a HTML input field?

Rob Michiels
  • 134
  • 1
  • 5
  • Look @ https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist - this might be helpful – Raphael Mar 12 '17 at 18:52
  • That doesn't do the trick quite well. Is it perhaps possible to use javascript to take an option from the list and put it in the texbox as selected? – Rob Michiels Mar 12 '17 at 19:16

1 Answers1

1

You should have a look at: https://jqueryui.com/autocomplete/

This is (I personally think) the best and easiest way to do this.

Have fun!

EDIT: Raphael's answer is great, but isn't supported on Safari if I'm right.

Maxime2400
  • 66
  • 8
  • I am familiar with autocomplete but that only gives me a list of available options. It does not autofill the input like the chrome browser itself does. Before I can press enter I have to press the down button. – Rob Michiels Mar 12 '17 at 19:04
  • I would suggest you to do the following: 1. The user starts to input content 2. On change of input select first element and select "in blue" the text that has been auto completed. So that if that's not the word he is looking for, he can continue to type and override that auto-completed content. Does that make sense to you? – Maxime2400 Mar 13 '17 at 20:40
  • Yes, that is exactly what I'm looking for. Now I have to figure out how I can make a blue selection with javascript or perhaps JQuery, which I figured, should be the hardest part. – Rob Michiels Mar 14 '17 at 11:32
  • You can refer to this post: http://stackoverflow.com/questions/3085446/selecting-part-of-string-inside-an-input-box-with-jquery – Maxime2400 Mar 15 '17 at 16:45
  • Aah great, just what I was looking for. Thank you! – Rob Michiels Mar 15 '17 at 21:25