jQuery UI Autocomplete: Tell It My 'Label' and 'Value'

Question

Is there a way to tell jQuery UI Autocomplete which JSON array indexes to use as the 'label' and 'value' when those aren't the index names used in the JSON array?

The aray containing my lookup values looks like this (as logged by Firebug):

[ Object { id="12", name="Don Davis" }, Object { id="17", name="Stan Smith" } ]

I want to use 'id' as the 'label' and 'name' as the 'value' but can't figure out how to tell the config object.

My array is contained in a local variable -- there's no Ajax call being made.

This response to another question solves the problem by creating a hidden form input, but it seems likely that there's a cleaner way of handling this.

Yu can do whatever you want if you use a function as the "source" parameter. — Dave Newton
– Dave Newton, Commented Jun 3, 2012 at 3:01

Michael Zajac · Accepted Answer · 2014-12-03 16:17:18Z

9

From reading the Jquery UI docs you can try something like this:

<script>
    $(function() {
var projects = [ { id: "12",value: "Don Davis" }, { id: "17", value:"Stan Smith" } ]

    $( "#project" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.value);
            return false;
        },
        select: function( event, ui ) {
            $( "#project" ).val( ui.item.value);
            $( "#project-id" ).val( ui.item.id);

            return false;
        },
        search: function(event, ui) { console.log(event); console.log(ui) }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.value+"</a>" )
            .appendTo( ul );
    };
});
    </script>

edited Dec 3, 2014 at 16:17

Michael Zajac

55.7k7 gold badges120 silver badges143 bronze badges

answered Jun 3, 2012 at 3:32

Jason Kulatunga

5,9041 gold badge28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cantera Over a year ago

Thanks - the docs demo also uses the hidden field for 'id' (as in your #project-id field), so I guess that's the officially supported way to do it, other than adjusting the JSON array indexes directly. This way would likely perform better. Thanks again.

Michael Zajac Over a year ago

Note that that in jquery-ui 1.11 (and possibly earlier), data("autocomplete") should be data("uiAutocomplete")

Shervin Ivari · Accepted Answer · 2020-12-09 05:21:32Z

0

Simply convert your result to an array that contains a list of label-value object

var list= result.map(function (item) { return { label: item.title, value: item.value }; });
$( "#project" ).autocomplete({
    source: list
});

edited Dec 9, 2020 at 5:21

answered Dec 8, 2020 at 16:11

Shervin Ivari

3,1215 gold badges30 silver badges43 bronze badges

Comments

Federico Alemany · Accepted Answer · 2016-12-06 19:37:01Z

-2

You must return an array like this: (side server PHP)

for( ... ){ $suggest = array('value'=>$value,'label'=>$label); }

answered Dec 6, 2016 at 19:37

Federico Alemany

472 bronze badges

Collectives™ on Stack Overflow

jQuery UI Autocomplete: Tell It My 'Label' and 'Value'

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related