CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
diplosaurus
diplosaurus

Reputation: 2588

jQuery UI Autocomplete displaying wrong value

jsFiddle for the interactive example

I have an auto-complete box similar to the example. If you start typing a name, that begins with M it will give you a drop-down list. If arrow down through the names (rather than selecting one with your mouse), you will notice, that the input box gets filled with the value rather than the name of the person.

HTML:

<input type="text" id="myInput" placeholder="Type M...">
<input type="hidden" id="myHidden">

Script:

$("#myInput").autocomplete({
    delay: 500,

    minLength: 1,

    select: function(e, ui) {
        $(this).val(ui.item.label);
        $("#myHidden").val(ui.item.value);
        return false;
    },

    source: [{"label":"Marie","value":1},
             {"label":"Michelle","value":2},
             {"label":"Mia","value":3},
             {"label":"Melissa","value":4},
             // ...etc
    ];
});

When you select a name, it adds it to the input correctly, but I'm trying to get rid of the numerical values being displayed as you arrow through the choices.

I didn't see any event in the auto-complete docs to hook into accomplish this.

May I have missed it or perhaps there is a way of restructuring my source data to prevent this?

Upvotes: 2

Views: 1165

Answers (1)

Andrei &#39;finelord&#39; Baibakou
Andrei &#39;finelord&#39; Baibakou

Reputation: 575

Solution:

$("#myInput").autocomplete({
    delay: 500,
    minLength: 1,
    select: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
        $("#myHidden").val(ui.item.value);
        return false;
    },
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    },
    source: [{"label":"Marie","value":1},
             {"label":"Michelle","value":2},
             //...
             {"label":"Maureen","value":40}]
});

JSFiddle demo

Upvotes: 5

Related Questions