在进一步的 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 ) {
    }
});
});

然后在第二个自动完成中，我想从第一个自动完成函数中获取选定的值，并使用它来构建 URL 字符串以用于第二个自动完成的源属性（此处显示为 valueFromFirstAutocomplete）。

$(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);