jeudi 16 juin 2016

Typeahead input element styling

I have a simple textbox input that looks like this:

 <input type="text" placeholder="Search for states">

and I want to do an autocomplete on it, similar to typeahead. The autocomplete part works, but I want to display in the textbox first suggestion:

For instance, having written "Al" and I get the following suggestions:

Textbox: Al

  • Alabama
  • Algeria

I want to have in the textbox, as faded text: Alabama (the abama to be faded).

How can I do this with jQuery or pure JS? Having basically in the same textbox, 2 text styles for 2 substrings?

If there are other methods (e.g. overlaying another transparent text control on it) and you can show me an example that would be great. I cannot change the input element (that is a given).

Aucun commentaire:

Enregistrer un commentaire