jQuery UI Autocomplete shows displays on a list the results but when select, prints the value and not the label

问题

I am having a lot of problems getting autocomplete working. First I've a validation incompatibility because I was using jQuery Validation and jQuery 1.5 and was breaking the AJAX functions on Autocomplete widget. This has been solved, now my PHP controller returns me a JSON of results with label/value. Of course, label is the name I want to show and the value is the value I need to submit.

I am using an example JSON output with PHP, only for testing and not for searching right now. This is what I send back when I make the AJAX request:

[{"label":"Client example","value":1},{"label":"Lorem Ipsum","value":2},{"label":"Microsoft","value":3}]

And using the next code I supposed that will show me directly the label and submit the id. When I start typing I see the results I want in a list Client example, Lorem Ipsum and Microsoft but when I select on of them the list is closed and the input shows the value and not the label.

$("#clientid").autocomplete({
    source: function(request, response) {
        $("#ajax-loader").fadeIn('normal');

        $.ajax({
            url: BASE_URL + 'projects/ajax/get_clients',
            data: request,
            dataType: "json",
            type: "POST",
            success: function(data) {
                response(data);
            }
        });

        $("#ajax-loader").fadeOut("normal");
    },
    minLength: 2
});

I also tried a code that @3nigma suggested me when I was looking why was the autocomplete failing:

success: function(data) {
    response($.map( data, function( item ) {
        return {
            label: item.label,
            value: item.value
        }
    }));
}

And nothing. Looking on examples of jQuery UI website and Google, seems that select has to do this thing so I tried:

select: function(event, ui) {
    $("#clientid").val(ui.item.label);
}

But doesn't works too., I see the value on the <input />.

I don't know what more I can try. How I can solve this problem?

Thank you in advance!

回答1:

A single <input /> can only store a value, without any label.

<input type="text" value="Lorem Ipsum" name="myInput">

Autocomplete simply sets the value attribute of the input, which is exactly the same as you would type in the input value. It is not directly possible to display a label in an input that would be different than its value.

You need to to adjust your data source to return value the same as label

[{"label":"Client example","value":"Client example"}...

but you will loose your value. When processing the submitted form you could retrieve the value using the label, assuming the label is unique.

回答2:

I was able to accomplish this using 2 additional lines of code in the select: and focus: functions.

in your case add these

    select: function(event, ui) {
    event.preventDefault();
    $("#clientid").val(ui.item.label);
    },
    focus: function(event, ui) {
    event.preventDefault();
    $("#clientid").val(ui.item.label);
    }

来源：https://stackoverflow.com/questions/5014359/jquery-ui-autocomplete-shows-displays-on-a-list-the-results-but-when-select-pri