在進一步的jQuery-ui自動完成功能中使用jQuery-ui自動完成變量

Question

如何在jQuery-ui自動完成功能中使用jQuery-ui自動完成中的選定項目？

例如對於此HTML：

<div class="ui-widget"> 
    <label for="project">Project: </label> 
    <input id="project" /> 
    <label for="phase">Phase: </label> 
    <input id="phase" /> 
    <label for="filename">Project: </label> 
    <input id="filename" /> 
</div> 

我正在使用以下自動填充功能和JSON端點來提供數據。

$(function() { 
$("#project").autocomplete({ 
    source: baseUrl+"json/listtitles", 
    minLength: 2, 
    select: function(event, ui) { 
    } 
}); 
}); 

然後，在該第二自動完成我想利用從第一自動完成功能所選擇的值，並用它來建立用於在第二自動完成（這裏示出爲valueFromFirstAutocomplete）的源屬性中使用的URL字符串。

$(function() { 
$("#phase").autocomplete({ 
    source: baseUrl+"json/listphases/"+valueFromFirstAutocomplete, 
    minLength: 2, 
    select: function(event, ui) { 
    } 
}); 
}); 

Answer 1

自定義一個回調的源選項，添加產生額外參數的URL：

$("#project").autocomplete({ 
    source: baseUrl+"json/listtitles", 
    minLength: 2 
}); 
$("#phase").autocomplete({ 
    source: function(request, response) { 
     $.get(baseUrl + "/json/listphases/" + $("#project").val(), request, response); 
    }, 
    minLength: 2 
}); 

Answer 2

你可以只是把一個在另一個內部....

是否有某種原因，這是行不通的？

$(function() { 
$("#project").autocomplete({ 
    source: baseUrl+"json/listtitles", 
    minLength: 2, 
    select: function(event, ui) { 
     $(function() { 
     $("#phase").autocomplete({ 
      source: baseUrl+"json/listphases/"+ui.item.value, 
      minLength: 2, 
      select: function(event, ui) { 
      } 
     }); 
     }); 
    } 
}); 
}); 

要使用這些獨立，你可以做這樣的事情：

var funclist = { 
    populate1 : function() { 
     $("#project").autocomplete({ 
     source: baseUrl+"json/listtitles", 
     minLength: 2, 
     select: populate2; 
     }, 

    populate2 : function(event,ui) { 
     $("#phase").autocomplete({ 
     source: baseUrl+"json/listphases/"+ui.item.value, 
     minLength: 2, 
     select: populate3; 
    } 
    populate3 : ; // etc 
} 

$(funclist.populate1);