How to feed the json value in text box using jQuery AutoComplete?

Question 1

I am adding another answer as this is a different approach than what was before

   $("#field").autocomplete({
        source: customers,
        minLength: 1,
        select: function(event, ui) {
            $("#field_id").val(ui.item.id);
        }
    });

I have added a field to show the id , so that you can fetch it to do whatever manipulation you want to do.

here is the link to the fiddle

http://jsfiddle.net/DLLVw/137/

Updated answer on doubt

Are you sure the value of dataEmp is in the same format as I have mentioned in the fiddle. you can check it in firebug console.

I think your json array is coming in the format of {"name":"Urban Development","id":1} wheras it should be {"value":"Urban Development", "id":1}. Change name to value.

Question 2

from my understanding autocomplete take two params, an array of objects with two properties value and data { value : "Urban Development", data : 1 } and a call back function

So you would need to parse your Json into this format first;

var json = JSON.parse(jsondata); 
var autocomplete_data = [];
for(var prop in json){
    autocomplete_data.push({ value : json[prop].name, data : json[prop].id });
}

 $("#customer").autocomplete(autocomplete_data, function(){ this.value = "blah" });

Question 3

you can use jquery autocomplete in your case.

The trick here to do is to convert your json object into array of names so that your autocomplete works

like this :

var newarr = [];
var customers = [{"name":"Urban Development","id":1},{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications, Inc.","id":5},{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
for (i=0; i<customers.length; ++i) {
  newarr.push(customers[i].name);
}

now your newarr has the array necessary for doing the autocompletion. So you can just use the following code to get your thing done

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {

var newarr = [];
var customers = [{"name":"Urban Development","id":1},{"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},{"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications, Inc.","id":5},{"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
for (i=0; i<customers.length; ++i) {
  newarr.push(customers[i].name);
}

$( "#tags" ).autocomplete({
source: newarr
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

as mentioned in the tutorial of jquery and a live demo also http://jqueryui.com/autocomplete/

Cheers !!

Question 4

You can try to use _renderItem method plus select callback:

    var customers = [{"name":"Urban Development","id":1},
        {"name":"Ball Corporation","id":2},{"name":"Apache Software Foundation","id":3},
        {"name":"The Coca-Cola Company","id":4},{"name":"Discovery Communications,Inc.","id":5},
        {"name":"Electronic Data Systems","id":6},{"name":"FreeWave Technologies, Inc.","id":7}] ;
    $("#customer").autocomplete({ 
        source: customers,
        select: function( event, ui ) {
            $("#customer").val(ui.item.name);
            return false;
        } 
    }).data( "ui-autocomplete" ).
        _renderItem = function( ul, item ) {
            return $( "<li>" )
            .attr( "data-value", item.id )
            .append( $( "<a>" ).text( item.name ) )
            .appendTo( ul );
        };