jquery 사용자 정의 자동 완성을 사용하여 종속 mutiple 선택 가능한 자동 완성을 만드는 방법

Question

내 프로젝트에서 jqueryui의 자동 완성을 사용하고 있습니다. 그것은 위대한 작품. 이제 이전 선택 옵션에 종속 된 자동 완성을 추가하고 싶습니다.

하나의 선택 입력란과 자동 완성 입력란이 있습니다.

<select id='type'> 
    <option value='languages'>Languages</option> 
    <option value='OS'>Operating Systems</option> 
</select> 

<input type='text' id='tags' /> 

필자는 자동 완성과 비슷한 기능을 사용합니다.

$(function() { 
    var languages = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "Scheme" 
    ]; 
    var os = [ 
     "Windows", 
     "Mac OS X", 
     "Chrome", 
    ]; 
    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      minLength: 0, 
      source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        languages, 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(", "); 
       return false; 
      } 
     }); 
}); 

어떻게 이전 선택의 내 변경 이벤트에 연결할 수 있습니까? 그래서 내가 운영 체제를 선택할 때. 자동 완성 기능은 배열을 언어에서 OS로 변경합니다.

감사합니다.

감사합니다.

Answer 1

다음 사항을 시도해보십시오. 또한 제안 배열이 약간 형식이 어떻게 바뀌 었는지 재구성해야합니다.

$("#type").change(function() { 
    var source = $(this).val().toLowerCase(); 

    $("#tags").source(function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        sources[source], extractLast(request.term))); 
    }); 
}); 

var sources = { 
    "languages": [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "Scheme" 
    ], 

    "os": [ 
     "Windows", 
     "Mac OS X", 
     "Chrome", 
    ] 
};