JQuery : Using Twitter Typeahead With A Custom JSON Feed With Example

I recently needed to implement a predictive search in EPiServer that gets generated from custom results from a custom database table which contains the companies products.  The overall concept is that a scheduled task runs nightly to combine 6 different tables into a single JSON feed to potential search terms.  After a bit of Googling I decided to use the Twitter Typeahead but I couldn't find an easy straightforward demo that I could just download and start playing with, so attached is my TypeaheadExample demo from Github.  It's based upon a tutorial here with a bit of customization. Troubleshooting You need to run the typeahead using a web server, if you just to try to load the file using chrome directly you will get the following error : Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. If you are using IIS, make sure your json is added to your websites allowed MIME types, open IIS -> MIME types -> Add -> 'json' and 'application/json'    


Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge


Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();