The typeahead directive from http://angular-ui.github.io/bootstrap/ is very, very flexible and there are many ways of achieving the desired functionality. I’m presenting 2 of them here. Firstly, the typeahead directive uses syntax very similar to the AngularJS select directive. This gives you full control over a displayed label and the data bound as model value. So … Read more
Michael Watson gave what I think is the simplest answer in his comment. .twitter-typeahead { width: 100%; } Update #1: Based on the comments below (thanks Steve, Vishi), do the same for .tt-hint, .tt-input, .tt-dropdown-menu. Update #2: mlissner reports that .tt-dropdown-menu is now .tt-menu, so the end result is .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: … Read more
here is a working typeahead example: <div class=”container”> <div ng-controller=”mainCtrl” class=”row-fluid”> <form class=”row-fluid”> <div class=”container-fluid”> <input type=”text” ng-model=”selected” typeahead=”state for state in states | filter:$viewValue” /> </div> </form> </div> </div> <script> angular.module(‘myApp’, [‘ui.bootstrap’]) .controller(“mainCtrl”, function ($scope) { $scope.selected = ”; $scope.states = [‘Alabama’, ‘Alaska’, ‘Arizona’, ‘Arkansas’, ‘California’, ‘Colorado’, ‘Connecticut’, ‘Delaware’, ‘Florida’, ‘Georgia’, ‘Hawaii’, ‘Idaho’, ‘Illinois’, … Read more
Typeahead.js version 0.10.0 now uses a separate component called a suggestion engine for providing the suggestion data. The suggestion engine which ships with Typeahead.js is called Bloodhound. Hence you cannot “define remote without having to define a dataset function”. An example of this working with a remote data source (I’m querying the TheMovieDb API, try … Read more
Edit There already was a pull about that : https://github.com/twitter/bootstrap/pull/2007 You can approach the desired behavior by using a proxy for the typeahead : Demo (jsfiddle) var $myTextarea = $(‘#myTextarea’); $(‘.typeahead’).typeahead({ source: source, updater: function(item) { $myTextarea.append(item, ‘ ‘); return ”; } }); I think the updater method is meant for this kind of thing, … Read more
You’ll have to use a setTimeout (like you are) but also store the reference so you can keep resetting the limit. Something like: // // $(‘#element’).donetyping(callback[, timeout=1000]) // Fires callback when a user has finished typing. This is determined by the time elapsed // since the last keystroke and timeout parameter or the blur event–whichever … Read more