Generating a dropdown style from a textbox like in facebook messages

[TeddyKiller]

I'm sure you've seen facebook, and myspace messages. Where when you compose, you type in the name, and it brings like.. a menu of a list of friends LIKE whats entered in the textbox. When clicking one, it inserts it into a div style into the textbox, allowing you the ability to add multiple contacts.

 

How do I do that? - Like this...

http://lh3.ggpht.com/_Dhwvn65yBx0/Sy2FQzA2QcI/AAAAAAAAAM0/9roA0IZRDPY/ComposeMessage_thumb.png?imgmax=800

[trq]

This would be easy enough to achieve using jQuery or similar but I'm not sure your going to get a step by step tutorial written in a forum reply.

 

Are you familiar with jQuery at all? If not, I would start there first. Once you have a bit of experience its just a matter of thinking your problems through in small steps (like all other programming problems).

[TeddyKiller]

All you had to tell me was search for TextBoxList.

Anywho, I found it..  http://devthought.com/projects/jquery/textboxlist/

although, the outcome, when you post.. (using a print_r($_POST)) comes up with..

Array ( [friendTo] => 1,0 )

Now, this is using two friends, Kayjay, and Dazzy4571, it seems to recognise kayjay as 1, and Dazzy4571 as 0. (I checked by doing one at a time)

Where did these numbers come from? they aren't row ID's .. I think maybe, because in the autoComplete2.php, D comes before K, and as I have 2 friends, in an array $names[] after sorted in alphabetical order, $names[0] is Dazzy, $names[1] is Kayjay...

 

Though how do I change that into the user? On the tutorial thing's demo, it does it the way I want.. but what have I changed?

This is the autoCompletel2.php using database

<?php
$server = $_SERVER['DOCUMENT_ROOT'];
include("$server/include/config.php");

$response = array();
$names = array();

$query = $db->execute("SELECT f.friend_id, u.displayname FROM friends as f, users as u WHERE f.user_id = '" . $_GET['uid'] . "' AND u.id = f.friend_id ORDER BY u.displayname ASC");

while($row = $db->fetchassoc($query))
{
    $names[] = $row['displayname'];
}

sort($names);

$search = isset($_REQUEST['search']) ? $_REQUEST['search'] : '';

foreach ($names as $i => $name)
{
    if (!preg_match("/\b$search/i", $name)) continue;

    $query = $db->execute("SELECT avatar FROM users WHERE displayname = '$name' LIMIT 1");
    
    $row = $db->fetchassoc($query);

    $response[] = array($i, $name, null, '<img src="/resize_image.php?file=' . $row['avatar'] . '&size=50" alt="" border="0" /> ' . $name);
}

header('Content-type: application/json');

echo json_encode($response);
?>