おいしいライクなタグを複製するには？

Question

私は可能なタグワードのリストを持っており、それらをクリック可能な単語としてテキスト入力フィールドの下に表示したいと考えています。クリックすると、これらの単語は下から消えます（この機能がない場合は回答を受け入れます）、テキスト入力フィールドに再び表示されます。

ボーナス：追加されたタグを入力フィールド（la Delicious）から削除できますが、上記の機能と同じくらい重要ではありません。

Answer 1

実際に繊細なタグは入力フィールドにありません。それはちょうどそのように見えます。 私はdelicousのようなタグフィールドに取り組んでいます。まだ使用する準備ができていません。 http://www.superbly.ch/?p=31

しかし、ここではより良いバリエーションを見つけることができます。 http://roberto.open-lab.com/2010/02/10/a-delicious-javascript-tagging-input-field/

Answer 2

誤解質問に対する私の回答：

のでbasciallyあなたは、タグ入力のためのオートコンプリート機能をしたいですか？ AJAXのクラシックケース！ :)

まず、ユーザーが既に入力した文字と一致するすべてのタグを返すサーバーサイドスクリプトが必要です。このスクリプトは、例えば、すべてのタグをMySQLデータベースに照会します。パフォーマンスのヒント：tag -fieldがインデックスであることを確認してください。そうすれば、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にカンマが含まれていないことを確認してください。