Question

Auto-complete seems to be a standard tool on web sites. Surprisingly, it is hard to find a ready-to-use solution in Internet. I have some basic requirements to the code:

1. I want to see only those words that start from the typed symbols (not those words that contain the types substring somewhere in the middle).
2. I want to be able to set the maximal number of words in the drop-dawn menu.
3. I want to be able to set style of the drop-dawn menu (color of the background, color of typed substring, color of rest of the word).
4. Suggested words has to be requested from the web-server (I do not want to load all possible values at once, since it is going to be a huge array of values).
5. There is just one example-file that I can just copy to my server and see that it works (then I can start to modify it to put there my content and set my style).

Do I want to much or there is something in the Internet?

ADDED:

As the first answer suggest, there is a solution provided by JQuery. I have managed to make it work. However it was not trivial, since the code is given out of the context. First it is not clear where I need to put this code (head?, body?). Then if I put it in the body it start to work only after I put this stuff to the head:

<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 
<script src="/js/demos.js" type="text/javascript"></script> 
<script src="/themeroller/themeswitchertool/" type="text/javascript"></script> 

It was not written on the page that I need to use this lines to make the code work. I copied this lines from the head of the page that provide the example of the auto-complete.

Moreover, I still have the problem since the auto-complete search all the words that contain the typed substring (and I need the words that start from the typed substring).

Answer 1

How about this demo:

http://jsbin.com/oniji4

Moreover, I still have the problem since the auto-complete search all the words that contain the typed substring (and I need the words that start from the typed substring).

For this you need to implement your own implementation of the source parameter. Documentation says that you can specify the following as the source:

• an Array with local data
• a String, specifying a URL
• a Callback

Now that you say that you want the suggested words to come from a server, you should use the second option (specify a URL for JSONP). That allows you to handle “I need the words that start from the typed substring” part.