jQuery를 자동 완성 다중 선택 옵션이 표시되지 않습니다

Question

위의 스크립트의 jQuery Autocomplete

<script> 

    $(function() { 
    var availableTags = [ 
    {key: "1",value: "NAME 1"},{key: "2",value: "NAME 2"},{key: "3",value: "NAME 3"},{key: "4",value: "NAME 4"},{key: "5",value: "NAME 5"} 
    ]; 

    $("#project-name").autocomplete({ 
     minLength: 0, 
     source: availableTags, 
     focus: function(event, ui) { 
     $("#project-name").val(ui.item.value); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#project-name").val(ui.item.value); 
     $("#project-id").val(ui.item.key); 

     return false; 
     } 
     }); 

    }); 

    </script> 

<form action="search" method="post" > 
<input id="project-name" name="project2" id="searchbox"/> 
<input type="text" id="project-id" /> 
</form> 

출력에 대한 나의 스크립트

작품 아니라,하지만 난 구성 옵션 multiselect: true,를 추가 할 경우 그 잘 표시되지 않으며 다중 선택이 작동하지 않습니다.

출력 multiselect 경우는

가 어떻게 태그의 적절한 디스플레이를 선택 여러 허용 할 수 있습니다 true로 설정?

감사합니다.

Answer 1

source 및 select 콜백에서 multiselect를 처리해야합니다.

function split(val) { 
    return val.split(/,\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

$("#project-name").autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     // delegate back to autocomplete, but extract the last term 
     response($.ui.autocomplete.filter(
      availableTags, extractLast(request.term))); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function (event, ui) { 
     var terms = split(this.value); 
     // 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(", "); 

     $("#project-id").val(ui.item.key); 

     return false; 
    } 
}); 

출처 :에 자바 스크립트를 변경 https://jqueryui.com/resources/demos/autocomplete/multiple.html

Fiddle