Shoutbox

Hey guys

I'm looking to do something similar to what facebook does when you search for a friend using their search box...



OR... even better, something like what Google Suggest does


*btw in this image, i had only typed "blah blah" into the search box and it popped up with all those options hehe


the difference being that i wouldn't want it to submit the form if the person was to key down and hit enter or click on the data that they wanted

What the idea is... that people will be adding data to a database/search data in a database, and when they are typing the first couple of letters of the Artist they are adding, it will search the database for artists that start with those few letters, and display those results and let them key down and select the right one if its there, saving them time typing the entire artist.

Anyway, i know how to retrieve the data, what i dont know is to code it in such a way that they can key down and have it replace the current input in the search/input box

I hope I'm making sense...

Anyway if anyone can point me in the right direction of how i could do that that would be great

Thanks!

lordy

BTW I've had a look through the source code, particularly for Google, but I can't even see anything in the course code for the google page that looks like it would do that sort of thing so i got really confused lol

the basic idea behind it is

you add an event listener to the testbox ( on the keypress event)
in that callback you use xmlhttprequest to pull the data from the server and then you display it in a div under the textbox

theres quite a few premade scripts of this already

if you want to use jquery theres a plugin to do this

download jquery
download jquery.suggest

then add this to your page (assuming the search box id is suggest)

code:

---

$(function($){

$("#suggest").suggest("files/search.php",{
onSelect: function() {alert("You selected: " + this.value)}});

}

---

quote:

---

Originally posted by -dt-
the basic idea behind it is

you add an event listener to the testbox ( on the keypress event)
in that callback you use xmlhttprequest to pull the data from the server and then you display it in a div under the textbox

---

I can get that part fine, it's more the arrow-navigation of the results that I can't get