2010-12-30 4 views
5

애플리케이션을 구축 중이며 Twitter/Facebook에서 @ [이름]을 사용하는 방식과 마찬가지로 텍스트 영역 내에서 자동 완성을하고 싶습니다. 그러나 [TID : x]를 입력 할 때 트리거하고 싶습니다. 여기서 x는 임의의 길이의 정수입니다.토큰 후에 트리거하는 jQuery 자동 완성 플러그인

트위터/페이스 북은 @ 기호를 누른 후 자동 완성을 시작한 다음 자동 완성을 위해 텍스트 데이터를 보낸다. jQuery UI 플러그인 (또는 다른 플러그인)이 이와 같은 작업을 수행 할 수있는 사람이 있습니까?

답변

4

실제로 가능합니다. 이 작업을 수행하기 위해 자동 완성 위젯의 이벤트 (searchselect)을 활용할 수 있습니다 : 여기

var triggered = false; 
var trigger = "TDI:"; 

$("input").autocomplete({ 
    source: [...], 
    search: function() { 
     if (!triggered) { 
      return false; 
     } 
    }, 
    select: function(event, ui) { 
     var text = this.value; 
     var pos = text.lastIndexOf(trigger); 

     this.value = text.substring(0, pos + trigger.length) + 
      ui.item.value; 

     triggered = false; 

     return false; 
    }, 
    focus: function() { return false; }, 
    minLength: 0 
}).bind("keyup", function() { 
    var text = this.value; 
    var len = text.length; 
    var last; 
    var query; 
    var index; 

    if (triggered) { 
     index = text.lastIndexOf(trigger); 
     query = text.substring(index + trigger.length); 
     $(this).autocomplete("search", query); 
    } 
    else if (len >= trigger.length) { 
     last = text.substring(len - trigger.length); 
     triggered = (last === trigger); 
    } 
}); 

데모 : http://jsfiddle.net/andrewwhitaker/kCkga/

주 :

  • 이는 매우 제한 데모입니다 . 문자열의 중간에서 자동 완성을 시도하면 작동하지 않습니다.
  • 이 예제를 완성하려면 입력 필드에서 커서의 위치를 ​​알아 내고 그 대신 텍스트를 삽입하는 작업을해야합니다.
  • 아마도 다른 버그 일 수는 있지만 분명히 가능하다고 생각합니다. 희망이 당신을 시작 가져옵니다.
+0

좋아! 이것은 트릭을 수행 할 것 같습니다. 나는 며칠 동안 그것을 뒤범벅 할 것이고, 다른 질문이 있으면 대답 할 것이다. 그것이 끝내면 나는 대답으로 표시 할 것입니다! 감사! – mikesir87

+0

정말 대단한 답변입니다. 고마워! –

5

jQuery-UI Autocomplete 및 Andrew의 예를 사용하는 플러그인을 만들었습니다. (감사합니다).

URL : https://github.com/experteer/autocompleteTrigger

데모 : http://jsfiddle.net/dmattes/2YRgW/1/

$('input,textarea').autocompleteTrigger({ 
    triggerStart : '@', 
    triggerEnd: '', 
    source: [ 
    "Asp", 
    "BASIC", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ] 
}); 

보다도, 다니엘

+0

이것은 지금까지 제가 가장 좋아하는 해결책입니다. 이제 완벽 할 수있는 만족스러운 div를 지원할 수 있다면. – Hawkee