jQuery UI AutoComplete를 태그 플러그인과 함께 사용하려고 시도했습니다.

Question

저는 설치 한 jQuery 용 태그 플러그인이 있는데 jQuery UI의 자동 완성과 연결하려고합니다.

두 플러그인은 서로 독립적으로 작동하지만 잘 작동하지 못합니다. jsFiddle에 샘플을 동봉했습니다. 당신이 아래로 스크롤하면

http://jsfiddle.net/ciel/ecbjG/

, 당신은 좋은 두 개의 플러그인과 다른 작품 중 하나를 주석 처리 할 수 ​​있습니다. 그러나 태그 추가 플러그인을 사용하면 자동 완성 기능이 작동하지 않습니다.

나는 누군가 내 실수를 저에게 보여줄 수 있기를 바랬습니다.

Answer 1

태깅 플러그인은 ID와 ID tags_tag이있는 입력 제어 태그를 텍스트 입력을 대체합니다.

태그 컨트롤 플러그인을 입력 컨트롤에 바인딩 한 후 자동 완성 플러그인을 tags_tag에 바인딩해야합니다.

$('#tags').tagsInput(); 

$("#tags_tag").autocomplete({ 
    source: availableTags, 
    minLength: 2, 
    select: function(event, ui) { 
     // something will happen eventually ... 
    } 
}); 

갱신
문제는 입력 초점 (blur 이벤트)을 잃는 경우 태그 플러그인이 태그를 추가하는 것입니다. 이 이벤트는 자동 완료 플러그인이 입력 값을 설정하기 전에 시작됩니다. 따라서 플러그인은 현재 입력 된 값 (예 : Pyt)을 가져 와서 선택한 값 (예 : Python) 대신 태그로 추가합니다. 나는 블러 이벤트를 제거하고 트리거하고 keypress ("Enter"시뮬레이션)를 사용하여이 작업을 완성합니다. 그러나 이것은 완전히 해킹입니다 :) ...

아마도 더 자세하게 태그 지정 플러그인을 연구하고 싶을 것입니다. 나는 그것이 자동 완성을위한 설정을 가지고있는 것을 보았다.

var settings = jQuery.extend({ 
    ... 
    autocomplete: { 
     selectFirst: false 
    }, 
    ... 
}, options); 

참조 : http://jsfiddle.net/ecbjG/5/ (업데이트)