Referring to the below code, i want to autocomplete on text box with id name with data as the source.

For the autocomplete Label should be displayName and value should be uid.After selecting one of the value corresponfing email id should be populated in the emailid text field.

I am not able to achieve this.Please help

2. <input type="text" id="name">
3. <input type="text" id="emailid">
4. var data={"users":[
5.              {"uid":"123","displayName":"User 123","mail":"123@example.com"},
6.              {"uid":"456","displayName":"User 456","mail":"456@example.com"},
7.              {"uid":"789","displayName":"User 789","mail":"789@example.com"},
8.          ]};
10. $("#name").autocomplete({
11.         source: data,
12.         width: 300,
13.         max: 20,
14.         delay: 100,
15.         minLength: 1,
16.         autoFocus: true,
17.         cacheLength: 1,
18.         scroll: true,
19.         highlight: false,
20.         select: function(event, ui) {
21.         //var selectedObj = ui.item; 
22.        
23.         }
24.     });