views:

1618

answers:

5

In my website, users have the possibility to store links.

During typing the internet address into the designated field I would like to display a suggest/autocomplete box similar to Google Suggest or the Chrome Omnibar.

Example:

User is typing as URL:

http://www.sta

Suggestions which would be displayed:

http://www.staples.com
http://www.starbucks.com
http://www.stackoverflow.com

How can I achieve this while not reinventing the wheel? :)

+3  A: 

You could try with http://google.com/complete/search?output=toolbar&q=keyword

and then parse the xml result.

Lagenar
you can't send ajax requests to a different domain though.
lacker
A: 

If you want the auto-complete to use date from your own database, you'll need to do the search yourself and update the suggestions using AJAX as users type. For the search part, you might want to look at Lucene.

albertb
+1  A: 

I did this once before in a Django server. There's two parts - client-side and server-side.

Client side you will have to send out XmlHttpRequests to the server as the user is typing, and then when the information comes back, display it. This part will require a decent amount of javascript, including some tricky parts like callbacks and keypress handlers.

Server side you will have to handle the XmlHttpRequests which will be something that contains what the user has typed so far. Like a url of

www.yoursite.com/suggest?typed=www.sta

and then respond with the suggestions encoded in some way. (I'd recommend JSON-encoding the suggestions.) You also have to actually get the suggestions from your database, this could be just a simple SQL call or something else depending on your framework.

But the server-side part is pretty simple. The client-side part is trickier, I think. I found this article helpful -

http://www.phpriot.com/articles/google-suggest-ajaxac

He's writing things in php, but the client side work is pretty much the same. In particular you might find his CSS helpful.

lacker
+1  A: 

Yahoo has a good autocomplete control.

They have a sample here..

Obviously this does nothing to help you out in getting the data - but it looks like you have your own source and arent actually looking to get data from Google.

Simon_Weaver
A: 

That control is often called a word wheel. MSDN has a recent walkthrough on writing one with LINQ: http://msdn.microsoft.com/en-us/magazine/cc721610.aspx. There are two critical aspects: deferred execution and lazy evaluation. The article has source code too.

fatcat1111