Autocomplete get concern value from json array

Question

  jQuery(function() {
   var ingrident_array_json = [{"id_product":"45","name":"Acetyl Hexapeptide-8\ufeff (Argireline)","unit_price":"19.4500000000","usage_percent_lo":"3.00","usage_percent_hi":"10.00","usage_percent_best":"10.00"},{"id_product":"46","name":"Ceramide Complex (CeraTouch\u2122)","unit_price":"23.6125000000","usage_percent_lo":"3.00","usage_percent_hi":"10.00","usage_percent_best":"5.00"}];
  $("input:text[id^='ingredient']").live("focus.autocomplete", null, function () {
 $(this).autocomplete({
    autoFocus: true,
    source: projects,
    focus: function( event, ui ) {
        $( "#autocomplete" ).val( ui.item.name );
        return false;
      },
      select: function( event, ui ) {
        $(this).val( ui.item.name );
        $(this).attr("data-value",ui.item.unit_price);
        $(this).closest('.extra_fileds').find('.product_id_public').val(ui.item.unit_price);
        return false;
      }
    })
    });

  });

i have ingrident_array_json json array which have six element in each record i want name in autocomplete populate and their other record in hidden filed. is it possible? Now showing nothing. Please any help will be appreciated

Answer 1

Firstly,the live method is deprecated. Use 'on()' instead in your projects.

Secondly make use as below:

var arr = $.map(ingrident_array_json, function(el) { return el });
$(function () {
    $('#ingredient').autocomplete({
        minLength: 3,
        source: arr,
        select: function (event, ui) {
           $('#ingredient').val( ui.item.name );
           $('#ingredient').attr("data-value",ui.item.unit_price);
           $('#ingredient').closest('.extra_fileds').find('.product_id_public').val(ui.item.unit_price);
           return false;
        }
    })
    .autocomplete().data("uiAutocomplete")._renderItem = function (ul, item) {
        return $("<li>")
          .append("<a>" + item.name + "</a>")
          .appendTo(ul);
    };
});

Hope this helps.