jQuery: Using autocomplete to add values to two fields instead of one

Question

I want to use the autocomplete plugin for jQuery to populate not one, but two fields when selecting one of the autocomplete values - the name of a band is entered in the #band input field, but the band url (if exists) should also automatically be added to the #url input field when selecting the band name.

Right now I simply have an un-pretty list in an external php file from which the autocompleter takes it's values:

            $bands_sql = "SELECT bands.name, bands.url
            FROM bands
            ORDER BY name";
            $bands_result = mysql_query($bands_sql) or print (mysql_error());
            while ($bands_row = mysql_fetch_array($bands_result)) {
                $band_name = $bands_row['name'];
                $band_url = $bands_row['url'];

                echo $band_name."\n"; #needs to be replaced with an array that holds name and url
            }

My autocomplete function looks very basic atm, but as I'm an absolute beginner when it comes to jQuery (and also clueless when it comes to PHP arrays), I have no idea how to tell it to populate two fields and not one.

                $(document).ready(function() {
                    $("#band").autocomplete('/autocomplete-bands.php');
                 });

Is that even possible?!

Answer 1

sure check use result hadler so you can then do what you want once a choice has been made

Answer 2

Here is an example of what you are looking for:

$("#band").autocomplete('/autocomplete-bands.php').result(function(event, data, formatted) {
    if (data)
        $('#url').(data['url']);
    else {
        // no data returned from autocomplete URL
    }
});

I don't know much about php, but whatever the format of your data that is returned should be put where the data['url'] is currently in order to populate the #url input.

Answer 3

I don't know about the particular plug-in you are using, but I would use the autocomplete widget for jQuery UI instead of a third party plug-in.