맛있는 클릭 가능한 태그를 복제하는 방법은 무엇입니까?

Question

나는 가능한 태그의 목록을 가지고 있으며, 나는 그것을 텍스트 입력 필드 아래에 클릭 가능한 단어로 보여주고 싶다. 일단 클릭하면이 단어는 아래에서 사라지고 (이 기능없이 답을 수락 할 것입니다) 텍스트 입력 필드에 다시 나타납니다.

추가 입력란 : 추가 입력란에서 태그를 삭제할 수 있지만 위의 기능만큼 중요하지는 않습니다.

Answer 1

실제로 delicous의 태그는 입력 필드에 없습니다. 그냥 그렇게 보입니다. 나는 delicous like tag 필드에서 일하고있다. 여전히 사용할 준비가되지 않았습니다. 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는 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에 쉼표가 없는지 확인하십시오.