How to use jquery autocomplete for different values

Question

Here is my code

<script>  
  $(function() {
    var availableTags1 = [
  {"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
   ];
   var availableTags2=[
   {"key":"22","value":"Ahmedabad"},{"key":"23","value":"Bangalore"},{"key":"24","value":"Chandigarh"},{"key"
:"25","value":"Chennai"}];

    $( "#project-name" ).autocomplete({
      minLength: 0,
      source: availableTags2,
      select: function( event, ui ) {
        $("#project-name").val( ui.item.value );
      } 
    });
  });
</script>
<input id="project-name" name="project2" />

if we use availableTags2 its working fine. But if we use availableTags1 not working. I also changed into $("#project-name").val( ui.item.name ); . But its not displaying anything.

Answer 1

Change this name with value

old:

var availableTags1 = [
{"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
];

New:

 var availableTags1 = [
{ "key": "1", "value": "NAME 1" }, { "key": "2", "value": "NAME 2" }, {   "key": "3", "value": "NAME 3" }
 ];

select event call when we select any label from list, on selection

This is an example, handle with json, with ajax call(api call)

$('#selcloter').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "url",
            data: "{ 'inputdate': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.name,
                        value: item.name,
                       //this is custom tag, can give any name
                        keyvalue: item.key 
                    }
                }));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $(this).val(ui.item.value)
        $('#HiddenFieldtosavekey').val(ui.item.KeyValue);
    },
    open: function () {
        $(this).autocomplete("widget").css({
            "width": 400
        });
        $(this).autocomplete('widget').zIndex(100002);
    },
    close: function () {
        //$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

Answer 2

So availableTags1 use this structure

{"key": "1","name": "NAME 1"}

And availableTags2

{"key":"22","value":"Ahmedabad"}

Change name to value and it works.

Edit

Or if you don't have any control over the data, you could use this

 var tags = [],
   temp = availableTags2;
 for (var i = 0; i < temp.length; i++) {
   tags.push({
     "key": temp[i].key,
     "value": temp[i].value ? temp[i].value : temp[i].name ? temp[i].name : ''
   });
 }
 availableTags2 = tags;

Cheers!