PHPackages bassjobsen/bootstrap-3-typeahead - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. bassjobsen/bootstrap-3-typeahead ActiveComponent[Utility & Helpers](/categories/utility) bassjobsen/bootstrap-3-typeahead ================================ Bootstrap 3 Typeahead 4.0.2(9y ago)1.7k272.5k↓30.4%1.3k[171 issues](https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues)[10 PRs](https://github.com/bassjobsen/Bootstrap-3-Typeahead/pulls)3Apache-2.0JavaScript Since Nov 15Pushed 3y ago68 watchersCompare [ Source](https://github.com/bassjobsen/Bootstrap-3-Typeahead)[ Packagist](https://packagist.org/packages/bassjobsen/bootstrap-3-typeahead)[ RSS](/packages/bassjobsen-bootstrap-3-typeahead/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (7)DependenciesVersions (13)Used By (3)Security (1) Bootstrap 3 Typeahead ===================== [](#bootstrap-3-typeahead) --- For simple autocomplete use cases there seems to be nothing wrong with the dropped typeahead plugin. Here you will find the typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Twitter's Bootstrap 3. The original code is written by [@mdo](http://twitter.com/mdo) and [@fat](http://twitter.com/fat). Users who migrate their website or app from Twitter's Bootstrap 2 to Bootstrap 3 can also use this plugin to keep their current autocomplete functions. See for a complete list of migrations steps: [Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3](http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/) With Twitter Bootstrap 3 the typeahead plugin had been dropped. [@mdo](http://twitter.com/mdo) says: "in favor of folks using [Twitter's typeahead](https://github.com/twitter/typeahead.js). Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by `typeahead.js` differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the `typeahead.js` dropdown menu to fit the default Bootstrap theme. Try [extended Bootstrap LESS](https://github.com/bassjobsen/typeahead.js-bootstrap-css) or if your are looking for a more extended version try: [typeahead.js-bootstrap3.less](https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.less). `Typeahead.js` doesn't seem ready for the new Twitter Bootstrap 3 at the moment. Code is not up to date and fixes are needed. See also: [Typeahead problems with Bootstrap 3.0 RC1](http://stackoverflow.com/questions/18167246/typeahead-problems-with-bootstrap-3-0-rc1). Bootstrap 4 ----------- [](#bootstrap-4) --- [Bootstrap 4](http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/) is coming soon. The Bootstrap 3 Typeahead will also work with Bootstrap 4. The look and feel of Bootstrap 4 will differ from Bootstrap 3 and so does the drop down menu. In Bootstrap 4 the typeahead dropdown menu will look like that shown in the figure below: [![Bootstrap 4 Typeahead](typeaheadv4.png)](typeaheadv4.png). Download -------- [](#download) --- - Download the latest [bootstrap3-typeahead.js](https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js) or [bootstrap3-typeahead.min.js](https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js). - Include it in your source after jQuery and Bootstrap's JavaScript. Full integration with Bootstrap 3 Typeahead ------------------------------------------- [](#full-integration-with-bootstrap-3-typeahead) --- Download the latest version of Boostrap from [Bootstrap](https://github.com/twbs/bootstrap/archive/master.zip). Copy `bootstrap3-typeahead.js` to the js/ folder. Edit `gruntfile.js` and add `bootstrap3-typeahead.js` to the plugins list. Build your own version with typeahead with `grunt dist`. CSS --- [](#css) --- There is no additional CSS required to use the plugin. Bootstrap's CSS contains all required styles in the `.dropdown-menu` class. The original CSS adds a `z-index` of 1051 to the dropdownmenu via the typeahead class. You could add this if you need it. `.typeahead { z-index: 1051; }` (less or css). Usage ----- [](#usage) --- ``` ``` You'll want to set `autocomplete="off"` to prevent default browser menus from appearing over the Bootstrap typeahead dropdown. ### Via data attributes [](#via-data-attributes) Add data attributes to register an element with typeahead functionality as shown in the example above. ### Via JavaScript [](#via-javascript) Call the typeahead manually with: ``` $('.typeahead').typeahead() ``` Destroys previously initialized typeaheads. This entails reverting DOM modifications and removing event handlers: ``` $('.typeahead').typeahead('destroy') ``` Javascript Example ------------------ [](#javascript-example) --- ### Loading a collection [](#loading-a-collection) ``` $.get("example_collection.json", function(data){ $("#name").typeahead({ source:data }); },'json'); //example_collection.json // ["item1","item2","item3"] ``` ### Using JSON objects instead of simple strings [](#using-json-objects-instead-of-simple-strings) You can add all the properties you wish on your objects, as long as you provide a "name" attribute OR you provide your own displayText method. The other values allow you to match the selected item with something in your model. ``` var $input = $(".typeahead"); $input.typeahead({ source: [ {id: "someId1", name: "Display name 1"}, {id: "someId2", name: "Display name 2"} ], autoSelect: true }); $input.change(function() { var current = $input.typeahead("getActive"); if (current) { // Some item from your model is active! if (current.name == $input.val()) { // This means the exact match is found. Use toLowerCase() if you want case insensitive match. } else { // This means it is only a partial match, you can either add a new item // or take the active if you don't want new items } } else { // Nothing is active so it is a new value (or maybe empty value) } }); ``` Options ------- [](#options) --- Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-source=""`. If you are using jQuery in your application, note that camel case attributes such as `data-minLength` should be formatted as `data-min-length`. If you want more explanation, see [this issue](https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/28). NameTypeDefaultDescriptionsourcearray, function`[]`The data source to query against. May be an array of strings, an array of JSON object with a name property or a function. The function accepts two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.itemsnumber`8`The max number of items to display in the dropdown. Can also be set to 'all'minLengthnumber`1`The minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called.showHintOnFocusboolean or `"all"``false`If hints should be shown as soon as the input gets focus. If set to true, all match will be shown. If set to `"all"`, it will display all hints, not filtering them by the current text. This can be used when you want an input that behaves a bit like a combo box plus auto completion as you type to filter the choices.scrollHeightnumber, function`0`Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).matcherfunctioncase insensitiveThe method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.sorterfunctionexact match, case sensitive, case insensitiveMethod used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.updaterfunctionreturns selected itemThe method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.highlighterfunctionhighlights all default matchesMethod used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.displayTextfunction`item.name || item`Method used to get textual representation of an item of the sources. Accepts a single argument item and has the scope of the typeahead instance. Should return a String.autoSelectboolean`true`Allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected and enter or tab is hit.afterSelectfunction`$.noop()`Call back function to execute after selected an item. It gets the current active item in parameter if any.delayinteger`0`Adds a delay between lookups.appendTojQuery element`null`By defaut, the menu is added right after the input element. Use this option to add the menu to another div. It should not be used if you want to use bootstrap dropup or dropdown-menu-right classes.fitToElementboolean`false`Set to true if you want the menu to be the same size than the input it is attached to.addItemJSON object`false`Adds an item to the end of the list, for example "New Entry". This could be used, for example, to pop a dialog when an item is not found in the list of data. Example: changeInputOnSelectboolean`true`Put the selected value text representation in the inputchangeInputOnMoveboolean`true`Put the active value text representation in the inputopenLinkInNewTabboolean`false`Open links in a new window/tabselectOnBlurboolean`true`Automatically select the active value on blurshowCategoryHeaderboolean`true`Show categories header in the dropdown menuMethods ------- [](#methods) --- - `.typeahead(options)`: Initializes an input with a typeahead. - `.lookup`: To trigger the lookup function externally - `.getActive`: To get the currently active item, you will get a String or a JSON object depending on how you initialized typeahead. Works only for the first match. Bower ----- [](#bower) --- To use with [Bower](http://bower.io/). Add to your bower.json file: ``` { "name": "MyProject", "dependencies": { "bootstrap3-typeahead": "git://github.com/bassjobsen/Bootstrap-3-Typeahead.git#master" } } ``` AngularJS --------- [](#angularjs) --- An AngularJS directive for the Bootstrap 3 Typeahead jQuery plugin can be found at . Bloodhound ---------- [](#bloodhound) --- [Bloodhound](https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md) is the [typeahead.js](https://github.com/twitter/typeahead.js) suggestion engine, since version 0.10.0. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. To use Bloodhound with Bootstrap-3-Typeahead: ``` // instantiate the bloodhound suggestion engine var numbers = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, local: ["(A)labama","Alaska","Arizona","Arkansas","Arkansas2","Barkansas"] }); // initialize the bloodhound suggestion engine numbers.initialize(); $(".typeahead").typeahead({ items: 4, source:numbers.ttAdapter() }); ``` Bootstrap Tags Input -------------------- [](#bootstrap-tags-input) --- [Bootstrap Tags Input](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input has a typeahead option which allows you to set the source: ``` $("input").tagsinput({ typeahead: { source: ["Amsterdam", "Washington", "Sydney", "Beijing", "Cairo"] } }); ``` or ``` $("input").tagsinput({ typeahead: { source: function(query) { return $.get("http://someservice.com"); } } }); ``` See also: [\#40](https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/40) ### Health Score 51 — FairBetter than 96% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity62 Solid adoption and visibility Community45 Growing community involvement Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 65% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~113 days Recently: every ~135 days Total 7 Last Release 3522d ago Major Versions v3.1.1 → v4.0.0-alpha2015-11-14 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/277531?v=4)[Axel Guckelsberger](/maintainers/Guite)[@Guite](https://github.com/Guite) ![](https://avatars.githubusercontent.com/u/954055?v=4)[Bass Jobsen](/maintainers/bassjobsen)[@bassjobsen](https://github.com/bassjobsen) --- Top Contributors [![bassjobsen](https://avatars.githubusercontent.com/u/954055?v=4)](https://github.com/bassjobsen "bassjobsen (134 commits)")[![melanie-gauthier](https://avatars.githubusercontent.com/u/241882423?v=4)](https://github.com/melanie-gauthier "melanie-gauthier (13 commits)")[![kristofdegrave](https://avatars.githubusercontent.com/u/1322395?v=4)](https://github.com/kristofdegrave "kristofdegrave (5 commits)")[![eatskolnikov](https://avatars.githubusercontent.com/u/1693000?v=4)](https://github.com/eatskolnikov "eatskolnikov (4 commits)")[![smmoosavi](https://avatars.githubusercontent.com/u/1582954?v=4)](https://github.com/smmoosavi "smmoosavi (4 commits)")[![joshgagnon](https://avatars.githubusercontent.com/u/850974?v=4)](https://github.com/joshgagnon "joshgagnon (3 commits)")[![Guite](https://avatars.githubusercontent.com/u/277531?v=4)](https://github.com/Guite "Guite (3 commits)")[![ylarom](https://avatars.githubusercontent.com/u/3155058?v=4)](https://github.com/ylarom "ylarom (3 commits)")[![sisou](https://avatars.githubusercontent.com/u/1828163?v=4)](https://github.com/sisou "sisou (3 commits)")[![grokcode](https://avatars.githubusercontent.com/u/61232?v=4)](https://github.com/grokcode "grokcode (3 commits)")[![wincelau](https://avatars.githubusercontent.com/u/6379869?v=4)](https://github.com/wincelau "wincelau (3 commits)")[![AndrewEastwood](https://avatars.githubusercontent.com/u/1483306?v=4)](https://github.com/AndrewEastwood "AndrewEastwood (2 commits)")[![Azwood](https://avatars.githubusercontent.com/u/16961654?v=4)](https://github.com/Azwood "Azwood (2 commits)")[![vaenow](https://avatars.githubusercontent.com/u/1642418?v=4)](https://github.com/vaenow "vaenow (2 commits)")[![emmx](https://avatars.githubusercontent.com/u/1238560?v=4)](https://github.com/emmx "emmx (2 commits)")[![yanawaro](https://avatars.githubusercontent.com/u/846906?v=4)](https://github.com/yanawaro "yanawaro (2 commits)")[![gsw945](https://avatars.githubusercontent.com/u/6281968?v=4)](https://github.com/gsw945 "gsw945 (2 commits)")[![bprotas](https://avatars.githubusercontent.com/u/300053?v=4)](https://github.com/bprotas "bprotas (2 commits)")[![railsonrdr](https://avatars.githubusercontent.com/u/29753339?v=4)](https://github.com/railsonrdr "railsonrdr (2 commits)")[![rendom](https://avatars.githubusercontent.com/u/1078548?v=4)](https://github.com/rendom "rendom (2 commits)") ### Embed Badge ![Health badge](/badges/bassjobsen-bootstrap-3-typeahead/health.svg) ``` [![Health](https://phpackages.com/badges/bassjobsen-bootstrap-3-typeahead/health.svg)](https://phpackages.com/packages/bassjobsen-bootstrap-3-typeahead) ``` ### Alternatives [bailangzhan/yii2-webuploader yii2-webuploader组件 5149.5k](/packages/bailangzhan-yii2-webuploader) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)