Autocomplete design

Question

I'm trying to autocomplete an input[type='search'], so the idea is when the user change the value of this input, he'll get a list of the strings which are contains the written string.

Dealing that, when I try to write a string, I get it but its design format is very weird.

Its such a <li>Nectarys</li> which is added by default. How can I fix this, by just displaying a simple list which extends the input[type='search']?

Here is the code that I'm using in HTML :

<input type="search" name="nomPoste" id="nomPoste" class="form-control" />

Any brilliant idea, please ?

Answer 1

Include the jqueru ui css file on your page.

Answer 2

Use CSS to format the list however you ilke.

Note that the different browsers are likely to handle something like this very differently, so I would recommend combining your custom CSS with a CSS reset.