{"id":176,"date":"2013-09-13T11:00:35","date_gmt":"2013-09-13T09:00:35","guid":{"rendered":"http:\/\/www.zellot.at\/blogs\/?p=176"},"modified":"2013-09-13T11:02:19","modified_gmt":"2013-09-13T09:02:19","slug":"twitters-typeahead-and-ajax","status":"publish","type":"post","link":"https:\/\/www.zellot.at\/blogs\/2013\/09\/13\/twitters-typeahead-and-ajax\/","title":{"rendered":"Twitters Typeahead and Ajax"},"content":{"rendered":"<p><a href=\"https:\/\/blog.twitter.com\/2013\/twitter-typeaheadjs-you-autocomplete-me\" title=\"Twitters Typeahead (ein JQuery Autocompleter)\">Twitters JQuery-Autocompleter Typeahead<\/a> (nicht Bootstrap Typeahead, welcher in Bootstrap 3 auch nicht mehr integriert ist) ist ein recht praktikabler Autocompleter den man mit ein paar Zeilen gut an seine eigenen Bed\u00fcrfnisse anpassen kann. Ich zeige es hier Anhand eines Ajax Calls mit zuerst noch nicht passenden Daten f\u00fcr Typeahead. Um diesen jetzt mit Custom Ajax Daten zu bef\u00fcllen, werden der typeahead Funktion folgende Optionen \u00fcbergeben.\n<\/p>\n<p>\nRemote sagt hier aus das die Daten nachgeladen werden (k\u00f6nnte z.B. auch eine Json Datei auf einen Server sein oder \u00e4hnliches). Remote wiederum besteht aus mehreren Parametern die bef\u00fcllt werden k\u00f6nnen. Die Url gibt logischerweise nur das Ziel des Ajax Calls an. Wie man bei URL sieht stelle ich mir hier z.B. die url durch eine Variable und den Wert des Inputfelds zusammen %QUERY wird anschlie\u00dfend von der Funktion automatisch mit dem Wert des Inputfeldes ersetzt. Um jetzt die noch nicht ganz passenden Daten in passende Daten zu konvertieren gibt es hier auch noch das filter &#8211; Feld. Diese erwartet eine Funktion, wobei der erste Parameter die vom Server geholten Daten repr\u00e4sentieren. Hier erstelle ich ganz ein ganz simples Array, welches ich anschlie\u00dfend zur\u00fcckgebe (<a href=\"http:\/\/https:\/\/github.com\/twitter\/typeahead.js\/#datum\" title=\"Twitter Doku \">Twitter Doku)<\/a>\n<\/p>\n<p><pre><code class=\"preserve-code-formatting\">\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#039;#input&#039;).typeahead({\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;remote: {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: baseUrl+&#039;?q=%QUERY&#039;,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter: function(parsedResponse){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var data = [];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(parsedResponse, function(index, item){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data.push(&nbsp;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value: item.name,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tokens: [item.name],\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: item.name\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return data;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\/\/A function with the signature filter(parsedResponse) that transforms the response body into an array of datums. Expected to return an array of datums.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n<\/code><\/pre><\/p>\n<p>\nSo hat man mit ein paar Zeilen Daten vom Server abgeholt und an seine Bed\u00fcrfnisse angepasst. F\u00fcr Bootstrap 3 m\u00fcssen momentan noch ein paar Zeilen CSS eingef\u00fcgt werden (<a href=\"https:\/\/github.com\/jharding\/typeahead.js-bootstrap.css\" title=\"Typeahead CSS \">Typeahead CSS <\/a>). Zus\u00e4tzlich musste ich aber hierbei noch f\u00fcr die hints display: none setzen da der Hint nicht an die passende Stelle wollte. Zus\u00e4tzlich musste ich f\u00fcr den Span die Breite auf 100% erh\u00f6hen da sonst das input Feld zu klein bleibt.<\/p>\n<ul>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/18167246\/typeahead-problems-with-bootstrap-3-0-rc1?rq=1\" title=\"Stackoverflow Hint\">http:\/\/stackoverflow.com\/questions\/18167246\/typeahead-problems-with-bootstrap-3-0-rc1?rq=1<\/a><\/li>\n<li><a href=\"http:\/\/stackoverflow.com\/questions\/18059161\/css-issue-on-twitter-typeahead-with-bootstrap-3\" title=\"Stackoverflow Hint\">http:\/\/stackoverflow.com\/questions\/18059161\/css-issue-on-twitter-typeahead-with-bootstrap-3<\/a><\/li>\n<\/ul>\n<p><pre><code class=\"preserve-code-formatting\">\n.twitter-typeahead .tt-hint\n{\n&nbsp;&nbsp;&nbsp;&nbsp;display: none;\n&nbsp;&nbsp;&nbsp;&nbsp;height: 34px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 6px 12px;\n&nbsp;&nbsp;&nbsp;&nbsp;font-size: 14px;\n&nbsp;&nbsp;&nbsp;&nbsp;line-height: 1.428571429;\n&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid transparent;\n&nbsp;&nbsp;&nbsp;&nbsp;border-radius:4px;\n}\n\n.twitter-typeahead .hint-small\n{\n&nbsp;&nbsp;&nbsp;&nbsp;height: 30px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 5px 10px;\n&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px;\n&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 3px;\n&nbsp;&nbsp;&nbsp;&nbsp;line-height: 1.5;\n}\n\n.twitter-typeahead .hint-large\n{\n&nbsp;&nbsp;&nbsp;&nbsp;height: 45px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px 16px;\n&nbsp;&nbsp;&nbsp;&nbsp;font-size: 18px;\n&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 6px;\n&nbsp;&nbsp;&nbsp;&nbsp;line-height: 1.33;\n}\n\n.twitter-typeahead .tt-query,\n.twitter-typeahead .tt-hint {\n&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 2px;\n}\n\n.tt-dropdown-menu {\n&nbsp;&nbsp;&nbsp;&nbsp;min-width: 240px;\n&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 2px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 5px 0;\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #fff;\n&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ccc;\n&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid rgba(0,0,0,.2);\n&nbsp;&nbsp;&nbsp;&nbsp;*border-right-width: 2px;\n&nbsp;&nbsp;&nbsp;&nbsp;*border-bottom-width: 2px;\n&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius: 6px;\n&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius: 6px;\n&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 6px;\n&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);\n&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);\n&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 0 5px 10px rgba(0,0,0,.2);\n&nbsp;&nbsp;&nbsp;&nbsp;-webkit-background-clip: padding-box;\n&nbsp;&nbsp;&nbsp;&nbsp;-moz-background-clip: padding;\n&nbsp;&nbsp;&nbsp;&nbsp;background-clip: padding-box;\n}\n\n.tt-suggestion {\n&nbsp;&nbsp;&nbsp;&nbsp;display: block;\n&nbsp;&nbsp;&nbsp;&nbsp;padding: 3px 20px;\n}\n\n.tt-suggestion.tt-is-under-cursor {\n&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #0081c2;\n&nbsp;&nbsp;&nbsp;&nbsp;background-image: -moz-linear-gradient(top, #0088cc, #0077b3);\n&nbsp;&nbsp;&nbsp;&nbsp;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));\n&nbsp;&nbsp;&nbsp;&nbsp;background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);\n&nbsp;&nbsp;&nbsp;&nbsp;background-image: -o-linear-gradient(top, #0088cc, #0077b3);\n&nbsp;&nbsp;&nbsp;&nbsp;background-image: linear-gradient(to bottom, #0088cc, #0077b3);\n&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: repeat-x;\n&nbsp;&nbsp;&nbsp;&nbsp;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#039;#ff0088cc&#039;, endColorstr=&#039;#ff0077b3&#039;, GradientType=0)\n}\n\n.tt-suggestion.tt-is-under-cursor a {\n&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n}\n\n.tt-suggestion p {\n&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;\n}\n\n.twitter-typeahead {\n&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;\n}\n<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twitters JQuery-Autocompleter Typeahead (nicht Bootstrap Typeahead, welcher in Bootstrap 3 auch nicht mehr integriert ist) ist ein recht praktikabler Autocompleter den man mit ein paar Zeilen gut an seine eigenen Bed\u00fcrfnisse anpassen kann. Ich zeige es hier Anhand eines Ajax Calls mit zuerst noch nicht passenden Daten f\u00fcr Typeahead. Um diesen jetzt mit Custom Ajax [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,10,11,51,52],"tags":[37,55,58,50,94,56,57,54],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-bootstrap-3","category-javascript","category-jquery","category-twitter","category-typahead","tag-ajax","tag-boostrap-3","tag-css-problems","tag-jquery-2","tag-twitter","tag-twitter-typeahead","tag-twitter-typeahead-ajax","tag-typeahead"],"_links":{"self":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":3,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/176\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}