Question

How can I use the selected item from a jQuery-ui autocomplete in a further jQuery-ui autocomplete function?

e.g. for this 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>

I am using the following autocomplete function with a JSON endpoint to supply the data.

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

Then in this second autocomplete I want to take the selected value from the first autocomplete function and use it to build the URL string for use in the source attribute of a second autocomplete (shown here as valueFromFirstAutocomplete).

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

Answer 1

Customize the source option with a callback, adding the additonal parameter to the 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
});