{"action":"created","issue":{"url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/60","labels_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/60/labels{/name}","comments_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/60/comments","events_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/60/events","html_url":"https://github.com/running-coder/jquery-typeahead/issues/60","id":97684311,"number":60,"title":"Can I store a key:value pair and retrieve the key on change","user":{"login":"pradeshc","id":2757851,"avatar_url":"https://avatars.githubusercontent.com/u/2757851?v=3","gravatar_id":"","url":"https://api.github.com/users/pradeshc","html_url":"https://github.com/pradeshc","followers_url":"https://api.github.com/users/pradeshc/followers","following_url":"https://api.github.com/users/pradeshc/following{/other_user}","gists_url":"https://api.github.com/users/pradeshc/gists{/gist_id}","starred_url":"https://api.github.com/users/pradeshc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pradeshc/subscriptions","organizations_url":"https://api.github.com/users/pradeshc/orgs","repos_url":"https://api.github.com/users/pradeshc/repos","events_url":"https://api.github.com/users/pradeshc/events{/privacy}","received_events_url":"https://api.github.com/users/pradeshc/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/running-coder/jquery-typeahead/labels/Support","name":"Support","color":"fef2c0"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-07-28T11:42:10Z","updated_at":"2015-07-31T16:52:00Z","closed_at":null,"body":"I've scoured the documentation to find how to use a key:value pair for the item data, but I cannot find an example.\r\n\r\nCurrently, my code looks like the countries example:\r\n```php\r\n$(document).ready(function() {\r\n  // Typeahead\r\n  $('#pickup').typeahead({\r\n    order: \"desc\",\r\n    source: {\r\n      data: [\r\n        \"Afghanistan\", \"Albania\", \"Algeria\"\r\n      ]\r\n    },\r\n    callback: {\r\n      onInit: function(node) {\r\n        console.log('Typeahead Initiated on ' + node.selector);\r\n      }\r\n    }\r\n  });\r\n```\r\n\r\nWhat I want is to send the database id together with the country name in the above example.\r\n\r\nCurrently, because I am retrieving the name of the selected country, I am forced to do an additional text lookup on the database to retrieve the id upon selection. The ability to store and retrieve the id will avoid the database lookup."},"comment":{"url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/comments/126750419","html_url":"https://github.com/running-coder/jquery-typeahead/issues/60#issuecomment-126750419","issue_url":"https://api.github.com/repos/running-coder/jquery-typeahead/issues/60","id":126750419,"user":{"login":"pradeshc","id":2757851,"avatar_url":"https://avatars.githubusercontent.com/u/2757851?v=3","gravatar_id":"","url":"https://api.github.com/users/pradeshc","html_url":"https://github.com/pradeshc","followers_url":"https://api.github.com/users/pradeshc/followers","following_url":"https://api.github.com/users/pradeshc/following{/other_user}","gists_url":"https://api.github.com/users/pradeshc/gists{/gist_id}","starred_url":"https://api.github.com/users/pradeshc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pradeshc/subscriptions","organizations_url":"https://api.github.com/users/pradeshc/orgs","repos_url":"https://api.github.com/users/pradeshc/repos","events_url":"https://api.github.com/users/pradeshc/events{/privacy}","received_events_url":"https://api.github.com/users/pradeshc/received_events","type":"User","site_admin":false},"created_at":"2015-07-31T16:52:00Z","updated_at":"2015-07-31T16:52:00Z","body":"Thank you\r\nI suppose this is a common usage and perhaps deserve an example in the documentation.\r\nI would propose a simple example of an id:value data source to render the plugin, and retrieval of the id being populated in the form, the common way a &lt;select&gt; tag will be used in a form,\r\n\r\nI was able to use your example, and then populate a hidden field in my form with the id value.\r\n\r\nThe one think I noticed about the Click event is that *node* will give you the value you typed (eg. 'Mi') and *obj* will give you the value you selected from the list (eg. \"Miami\").\r\n\r\n```javascript\r\n$(document).ready(function() {\r\n  // Typeahead\r\n  $('#pickup').typeahead({\r\n    order: \"desc\",\r\n    display: \"name\", // Typeahead will search through \"name\" object property\r\n    source: {\r\n      data: [{\r\n        id: 1,\r\n        name: \"Afghanistan\"\r\n        }, {\r\n        id: 2,\r\n        name: \"Albania\"\r\n        }\r\n      ]\r\n    },\r\n    callback: {\r\n      onInit: function(node) {\r\n        console.log('Typeahead Initiated on ' + node.selector);\r\n      },\r\n\tonClick: function (node, a, obj, e) {\t            \r\n\t\t  $('#city_list-query').val(obj.display);\r\n\t\t  $('#city_list-query').select();\r\n        }\r\n    }\r\n  });\r\n```"}}