How do to write autocomplete for Json Data

Question

Iam using Kendo UI and developing a phonegap application.Json structure i am using is as below.

{
   "40":{
      "title":"AC COBRA",
      "value":{
         "key_160":"M K I I I (1965 REPLICA)"
      }
   },
   "41":{
      "title":"ACURA",
      "value":{
         "key_161":"CL",
         "key_162":"MDX",
         "key_163":"NSX",
         "key_164":"RL",
         "key_165":"RSX",
         "key_166":"TL"
      }
   }
}

I have two Dropdown where all the item in title gets listed,and on selecting it the corresponding values gets listed without the key in a separate Dropdown.

How do I write autocomplete for the list that is loaded.Any suggestion either through Jquery or Kendo is welcome.If you are suggesting Kendo filtering http://demos.telerik.com/kendo-ui/mobile/listview/filtering.html please let me know a way where the search box is fixed and only the list is scrollable.

Answer 1

Try it like below.

var  dataVar = // Your JSON Goes here.
$("#AutocompleteDropdown").autocomplete({
              source: dataVar,
         });

JSFIDDLE