{"id":348,"date":"2012-09-18T14:55:04","date_gmt":"2012-09-18T14:55:04","guid":{"rendered":"http:\/\/www.eddiedillon.info\/?p=348"},"modified":"2012-09-18T14:55:04","modified_gmt":"2012-09-18T14:55:04","slug":"a-very-nice-tool-to-display-drop-down-data-on-your-website","status":"publish","type":"post","link":"https:\/\/www.eddiedillon.info\/?p=348","title":{"rendered":"A very nice tool to display drop down data on your website"},"content":{"rendered":"

I had a requirement on a project I have been working on to provide a search tool that can look up live data and filter it based on what you type through an auto-complete function. \u00a0I have been through 3 iterations, here is what I have used to this point:<\/p>\n

The first one I used was the JQuery ComboGrid found HERE<\/a>. \u00a0This tool was a good first run, it provides auto-complete and will display a grid that attaches to your INPUT element and allows you to display columns of data and will populate the field with whatever you select. \u00a0The problems I had with it is that it doesn’t look at all on an IPad and formatting it was somewhat of a nightmare, so I had to ditch this one.<\/p>\n

Then I came across the Chosen control found HERE<\/a>. \u00a0This control was a better step in that it does a very good job of formatting a SELECT element with auto-complete and filtering of the results. \u00a0The problems I ran into with this control was that it does some weird things on the IPad and it had no native function to hook into live data on a server, so I had to continue my search.<\/p>\n

I have finally landed on the Select2 control, found HERE<\/a>, so far this control does everything I need, it provides an ajax: function that allows you to hook right into your web call and even provides hooks for formatting the results and CSS file inclusion. \u00a0 A word of advice if you are using the ajax: function, make sure you are using an INPUT element instead of SELECT and that your results include a lowercase id and text property, the control uses the id for searching, and the text property to display the results. \u00a0Happy coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"

I had a requirement on a project I have been working on to provide a search tool that can look up live data and filter it based on what you type through an auto-complete function. \u00a0I have been through 3 iterations, here is what I have used to this point: The first one I used […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38,87,1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/posts\/348"}],"collection":[{"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348"}],"version-history":[{"count":1,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eddiedillon.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}