How to replicate Delicious-like clickable tags?

I have a list of possible tagwords, and I would like to show them below a text input field as clickable words. Once clicked, these words will disappear from below (would accept answer without this feature) and reappear in the text input field.

Added bonus: include the abili开发者_JAVA百科ty to delete the added tag from the input field (a la Delicious), but not as important as the above functionality.

actually the tags in delicous are not in the input field. It just looks like that. I'm working on a delicous like tag field. but still not ready to use. http://www.superbly.ch/?p=31

But you can find better variants here. http://roberto.open-lab.com/2010/02/10/a-delicious-javascript-tagging-input-field/

My response to a misunderstood question:

So bascially you want an auto-complete function for a tags-input? Classic case for AJAX! :)

First, you'll need a server side script wich will return all the tags that match the characters the user has already typed. This script could e.g. query a MySQL-database for all the tags. Performance tip: Make sure the tag-field is an index, so MySQL will find the tag faster. The response of the server could be a JSON or XML list of possible tags.

Then, you'll need a JavaScript which calls this server side script on every keystroke (maybe you want to add a little delay, so the server won't get overthrown by requests). The JavaScript then will parse the JSON or XML from the server and print it as HTML.

I think nobody here will code it for you (at least not for free), but I'm sure you'll be able to do this, as this is a pretty common task and google will sure help, too.

Edit: By the way, did you know my name's nobody? I actually wrote some example-code to get you started.

ajax.php:

// Add Databse-connection stuff right here

$q = strtolower ( $_GET['q'] );
if ( empty ( $q ) )
    die ( '' );

// Select all the tags that begin with the already-typed letters ($_GET["q"])
$query = "SELECT `tag` FROM `tags` WHERE `tag` LIKE ".mysql_real_escape_string($q)."_% LIMIT 10";
$did = mysql_query ( $query );
if ( !$did )
    die ( '' );

$tags = array ();
while ( $tag = mysql_fetch_row($result) ) {
    $tags[] = $tag[0];
}

// Yes, I actually didn't use any JSON or XML here, just a comma-seperated list
$ret = implode ( ",", $tags );

echo $ret;

autocomplete.js:

var tags_input = document.getElementById("tags");
var timeout = 500; // If the user doesn't type for this amount of miliseconds, the AJAX request gets sent. To protect the server a little bit. :)

var xhr;
var do_ajax = false; // Gets true after 500 ms of not typing

var tags = [];

tags_input.onkeyup = function (e) {
    if ( !e ) e = window.event;

    do_ajax = false;

    window.setTimeout ( function () {
        do_ajax = true;
        ajax_request();
    }, 500 );

};

function ajax_request () {
    var q = tags_input.value;
    if ( q == '' )
        return;
    xhr = new XMLHttpRequest;
    xhr.open ( 'GET', 'ajax.php?q='+q, true );
    xhr.send ( null );
    xhr.onreadystatechange = function () {
        if ( xhr.readyState == 4 ) {
            if ( xhr.responseText != '' ) {
                tags = xhr.responseText.split ( ',' );
                show_autocompletions();
            }
        }
    };
}

function show_autocompletions () {
    alert ( tags.join ( ', ' ) ); // you might want to generate some real HTML here
}

Table-structure for this example: The table's called tag and it contains the only field tag, which is a unique index. Make sure tag doesn't contain any commas.