{"id":1189,"date":"2013-07-29T23:38:50","date_gmt":"2013-07-29T23:38:50","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1189"},"modified":"2013-07-31T23:12:17","modified_gmt":"2013-07-31T23:12:17","slug":"1189","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2013\/07\/1189\/","title":{"rendered":"JQuery \u2013 how to get a key and value with autocomplete?"},"content":{"rendered":"<p>Jquery autocomplet is easy but when you have to get the key of the array and store into the database or just you want to get it\u2019s a bit tricky.<br \/>\nI have used the jquery UI autocomplete feature with JSON object which you can create with given PHP code.<br \/>\nAs soon as you choose a list of the values, key automatically gets populated into another hidden field. For sake of understanding I made it text field.<br \/>\nYou can do whatever you want with that id!! <\/p>\n<pre lang=\"js\">\r\n<link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/ui\/1.10.3\/themes\/smoothness\/jquery-ui.css\" \/>\r\n<script src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n<script src=\"http:\/\/code.jquery.com\/ui\/1.10.3\/jquery-ui.js\"><\/script>\r\n\r\n<script>\r\n\t\r\n  $(function() {\r\n  \tvar availableTags = [\r\n\t{key: \"1\",value: \"NAME 1\"},{key: \"2\",value: \"NAME 2\"},{key: \"3\",value: \"NAME 3\"},{key: \"4\",value: \"NAME 4\"},{key: \"5\",value: \"NAME 5\"}\r\n\t ];\r\n\t\r\n    $( \"#project-name\" ).autocomplete({\r\n      minLength: 0,\r\n      source: availableTags,\r\n      focus: function( event, ui ) {\r\n        $( \"#project-name\" ).val( ui.item.value );\r\n        return false;\r\n      },\r\n      select: function( event, ui ) {\r\n        $( \"#project-name\" ).val( ui.item.value );\r\n        $( \"#project-id\" ).val( ui.item.key );\r\n \r\n        return false;\r\n      } \r\n\t  });\r\n\r\n  });\r\n\r\n\t<\/script>\r\n\r\n<form action=\"search\" method=\"post\" >\r\n<input id=\"project-name\" name=\"project2\" id=\"searchbox\"\/>\r\n<input  type=\"text\" id=\"project-id\" \/>\r\n<\/form>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Jquery autocomplet is easy but when you have to get the key of the array and store into the database or just you want to get it\u2019s a bit tricky. I have used the jquery UI autocomplete feature with JSON object which you can create with given PHP code. As soon as you choose a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[27,30],"tags":[],"class_list":["post-1189","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1189"}],"version-history":[{"count":3,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1189\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1189\/revisions\/1197"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}