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 !!