Как скопировать кликабельные теги, похожие на вкусные?

Question

У меня есть список возможных ключевых слов, и я хотел бы показать их под полем ввода текста в виде кликабельных слов. После щелчка эти слова исчезнут снизу (примут ответ без этой функции) и снова появятся в поле ввода текста.

Добавленный бонус: включает возможность удаления добавленного тега из поля ввода (а-ля Delicious), но не так важно, как вышеуказанные функции.

Answer 1

на самом деле теги в delicous не находятся в поле ввода.Это просто выглядит так.Я работаю над деликатным тегом.но все еще не готов к использованию.http://www.superbly.ch/?p=31

Но вы можете найти лучшие варианты здесь.http://roberto.open -lab.com / 2010/02/10 / а-вкусно-Javascript-мечение-вход поля /

Answer 2

Мой ответ на неправильно понятый вопрос:

Значит, вам нужна функция автозаполнения для ввода тегов? Классический чехол для AJAX! :)

Во-первых, вам понадобится серверный скрипт, который вернет все теги, которые соответствуют символам, которые пользователь уже набрал. Этот сценарий может, например, запросить базу данных MySQL для всех тегов. Совет по производительности: убедитесь, что поле tag является индексом, чтобы MySQL быстрее находил тег. Ответ сервера может быть списком возможных тегов в формате JSON или XML.

Затем вам понадобится JavaScript, который вызывает этот сценарий на стороне сервера при каждом нажатии клавиши (возможно, вы захотите добавить небольшую задержку, чтобы сервер не был перегружен запросами). Затем JavaScript будет анализировать JSON или XML с сервера и печатать его как HTML.

Я думаю, что никто здесь не будет кодировать его для вас (по крайней мере, не бесплатно), но я уверен, что вы сможете это сделать, поскольку это довольно распространенная задача, и Google наверняка тоже поможет.

---

Редактировать: Кстати, вы знали, что меня зовут никто? Я на самом деле написал пример кода, чтобы вы начали.

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
}

Структура таблицы для этого примера: таблица называется tag и содержит единственное поле tag, которое является уникальным индексом. Убедитесь, что tag не содержит запятых.