jquery ui autocomplete with json object doesn't work

Question

I am trying to use a JSON object with jquery ui autocomplete. Not having much success. I looked at https://jqueryui.com/autocomplete/#custom-data. But the example has too much superfluous code which I don't need. Anyway, the json object doesn't function; nothing visable happens. I am trying to yank members.Name into the page form with autocomplete. It's not working. I don't think I'm even close to a solution. Can anyone please help?

PRELIM

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

OLD JS ARRAY (which works fine)

var players = [ "Addabbo, Eric", "Adeyemon, Murie", "Agok, Peter Panthe", "Ahmed, Jamshed", "Allen, Daniel", "Amato, David Petty"]

OLD JS

<script>$(function() {$( ".autocomplete-2" ).autocomplete({delay: 0, source: window.players, minLength: 2, autoFocus: true});});</script>

NEW JSON OBJECT (which doesn't work)

var members = 
[
{ "Name": "Ahmed, Jamshed", "cccrEXP": "2018.10.10" },
{ "Name": "Attaya, James", "cccrEXP": "2019.1.12" },
]

NEW JS

<script>
$( function() {

$( ".autocomplete-2" ).autocomplete({
  minLength: 0,
  source: members,
  focus: function( event, ui ) {
    $( ".autocomplete-2" ).val( ui.item.label );
    return false;
  },
      return false;
  }
})

} );
</script>

Fixed... simple edit. But that doesn't solve the problem, unfortunately. — verlager
– verlager, Commented Jun 8, 2018 at 1:44

Wesley Smith · Accepted Answer · 2018-06-08 02:07:11Z

2

The docs for the Autocomplete Widget state:

source:

Defines the data to use, must be specified.

Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

The issue is that your objects don't have the label or value properties. If you can, change the format of the objects to use those properties. If you can't do that, you could add the needed properties in a loop like so:

var members = [{
    "Name": "Ahmed, Jamshed",
    "cccrEXP": "2018.10.10"
  },
  {
    "Name": "Attaya, James",
    "cccrEXP": "2019.1.12"
  },
]

$.each(members, function(i, member){
        member.value = member.label = member.Name; // assuming you want to use .Name for both
});

// now you can pass `members` to the autocomplete method

answered Jun 8, 2018 at 2:07

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

4 Comments

verlager Over a year ago

Please, show the complete code. I am very confused. I don't grok where your code goes.

verlager Over a year ago

BTW my actual object does have the requisite format: verlager.com/assets/cccr_mems.json

verlager Over a year ago

I think I got it!

verlager Over a year ago

Absolutely correct. You have saved me several KB of extra json data.

Collectives™ on Stack Overflow

jquery ui autocomplete with json object doesn't work

PRELIM

OLD JS ARRAY (which works fine)

OLD JS

NEW JSON OBJECT (which doesn't work)

NEW JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

PRELIM

OLD JS ARRAY (which works fine)

OLD JS

NEW JSON OBJECT (which doesn't work)

NEW JS

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related