Binding a jquery autocomplete dynamic textbox to json

I have done a heap of searching but can't seem to get anywhere.

I have some json that looks like

[{"IngredientId":1,"IngredientName":"Butter","CategoryID":1},{"IngredientId":2,"IngredientName":"Sugar","CategoryID":1},{"IngredientId":3,"IngredientName":"Water","CategoryID":1},{"IngredientId":4,"IngredientName":"Salt","CategoryID":1}]

Im trying to do 2 things. 1. Somehow store IngredientId from the selected autocomplete开发者_如何学Go textbox and the most important.Bind the autocomplete to the above json.

This is my lame attempt of binding the value

.autocomplete({
        source: ingredients,
        select: function (item) {
            console.log(item.IngredientId);
            return item.IngredientName;
        }

Can someone help out with the right way I should be binding to the autocomplete?

Thank you

source property requires plain array or array of objects (or string). Going with array of objects those should be of the type { 'value': 'some_val', 'label': 'some_label' }.

If you don't have control over that ingredients array you should probably map it in order to work with autocomplete.

 var ingredients_ac = $.map( 
    ingredients,
    function( obj ) {
      return { value: obj.IngredientId, label: obj.IngredientName };
  } );

then use the new array with autocomplete

.autocomplete({
        ...
        source: ingredients_ac,
        ...
        }
);