jqueryui 자동 완성 제한 다중 선택

Question

jQuery UI 자동 완성 기능을 사용 중이고 여러 결과를 제한하려고합니다. 기본적으로 필자는 PM 시스템을 구축 중이며 to 필드에 자동 완성 기능을 사용하고 있습니다. 하지만 한 메시지를 보낼 수있는 사람의 수를 제한하려고합니다. 그래서 최대 선택 수를 25로 제한하십시오.

제한 방법이 있습니까? 또한 그들이 최대에 도달 한 시각적 표시기에 대한 아이디어가 있습니까?

select: function(event, ui){ 
    var terms = split(this.value); 
    if(terms.length <= 2) 
    { 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(", "); 
     return false; 
    } 
    else 
    { 
     $(this).effect("highlight", {}, 1000); 
     $(this).addClass("red"); 
     $("#warnings").html("<span style='color:red;'>Max people reached</span>"); 
     return false; 
    } 
} 

Answer 1

이것은 events을 통해 쉽게 실현할 수 있습니다. 예를 들어 adding class으로 빨간색을 표시하고 클래스를 자동 완성으로 제거 할 수 있습니다. 나는 당신이 약간의 노력으로 이것을 스스로 달성 할 수 있다고 생각합니다.

select: function(event, ui) { 
    var terms = split(this.value); 
    if(terms.length <= 2) { 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(", "); 
     return false; 
    } else { 
     var last = terms.pop(); 
     $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input 
     $(this).effect("highlight", {}, 1000); 
     $(this).addClass("red"); 
     $("#warnings").html("<span style='color:red;'>Max people reached</span>"); 
     return false; 
    } 
} 

P.S 또한 google 이러한 플러그인 중 하나가 적절한 감사가 될 수 있다고 생각 :

:

---

1. https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

   내 의견에 좋은 보이는

   live demo을 보려면 링크를 클릭하십시오.

나는 몇 가지 코드를 추가 한 내 원래의 게시물 최대 있도록 확인
2. Facebook style JQuery autocomplete plugin