Question

im working on this jquery data entry form in which i need a specific field to be autocompleted with data from mysql

i got everything working, autocomplete retrieves data from the sql through php matching is great in english/latin and utf8 characters

the values get retrieved from the sql as “‘number’ => ‘name'”

right now the autocomplete has 3 values in the output, value, label and id.
as id and value it uses the ‘name’
and the label is the ‘number’ of my sql string (which is posted to the next page when the form is submited)

so everyting works ok, my ‘number’ is posted correctly, there is a minor annoyance tho

when i select something from the autocomplete list, the field is populated with the ‘number’
is there any way to fill it with the ‘name’?
ie: search for ‘name’, get dropdown with ‘names’, click and get the ‘name’ in the field, and when i submit i get the ‘number’ posted?

any help would be greatly appreciated.

if you need to take a look at my code, it’s posted on a previous question: Jquery ui – Autocomplete – UTF8 charset

thanx in advance 🙂

Answer 1

The usual way to do this is:

1. Use a hidden input to hold the value you’d like to POST, then autocomplete a separate field.
2. Populate the hidden input on select
3. Populate the visible, autocompleted input with the label property of the item that was selected.

So, for example:

HTML:

<input type="hidden" name="name" />
<input type="text" id="name_auto" />

JavaScript:

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

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            this.value = ui.item.label;
        },
        change: function (event, ui) {
            if (ui.item) { 
                $("input[name='name']").val(ui.item.value);
            } else {
                $("input[name='name']").val('');
            }
        }
    });
});