jQueryUI Valor de autocompletado diferente a la etiqueta

jquery-ui jquery-ui-autocomplete

Question

Tengo un jQuery UI Autocomplete que funciona bien, si el objeto json devuelto tiene este aspecto:

label:name
value:name

Luego busca a través de mi nombre y cuando el usuario selecciona uno, llena el cuadro de entrada con mi nombre.

Pero lo que quiero es que el objeto json se vea así:

label:name
value:id

Cuando hago esto, el autocompletado llena el cuadro de entrada con el número de identificación en lugar de la cadena de nombre.

¿Cómo puedo hacer que el autocompletar establezca el texto mostrado al nombre y el valor oculto al valor?

No veo ninguna manera de hacer esto en los documentos oficiales.

Aquí está mi autocompletado:

$("#eventAccount").autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }

            request.e = "getMyAccountAutocomplete";

            $.getJSON("/admin/ajaxController.php", request, function (data, status, xhr) {
                cache[term] = data;
                response(data);
            });
        }
    });

Y el JSON está volviendo:

[{"label":"My fancy name","value":"229"}]

Answer 1

No hay una forma integrada de hacer esto. En su lugar, debe anular el evento de select y actualizar el valor de input usted mismo;

$("#eventAccount").on("autocompleteselect", function (e, ui) {
    e.preventDefault(); // prevent the "value" being written back after we''ve done our own changes

    this.value = ui.item.label;
    // Put ui.item.value somewhere
});