Download the PHP package bassjobsen/bootstrap-3-typeahead without Composer

On this page you can find all versions of the php package bassjobsen/bootstrap-3-typeahead. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package 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 and @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

With Twitter Bootstrap 3 the typeahead plugin had been dropped. @mdo says: "in favor of folks using Twitter's typeahead. 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 or if your are looking for a more extended version try: typeahead.js-bootstrap3.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.~~

Bootstrap 4

Bootstrap 4 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: .

Download

Full integration with Bootstrap 3 Typeahead

Download the latest version of Boostrap from Bootstrap. 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

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

Destroys previously initialized typeaheads. This entails reverting DOM modifications and removing event handlers:

Javascript Example

Loading a collection

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.

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.

Name Type Default Description
source array, 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.
items number 8 The max number of items to display in the dropdown. Can also be set to 'all'
minLength number 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.
showHintOnFocus boolean 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.
scrollHeight number, function 0 Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).
matcher function case insensitive The 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.
sorter function exact match, case sensitive, case insensitive Method 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.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.
displayText function 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.
autoSelect boolean 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.
afterSelect function $.noop() Call back function to execute after selected an item. It gets the current active item in parameter if any.
delay integer 0 Adds a delay between lookups.
appendTo jQuery 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.
fitToElement boolean false Set to true if you want the menu to be the same size than the input it is attached to.
addItem JSON 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: http://cl.ly/image/2u170I1q1G3A/addItem.png
changeInputOnSelect boolean true Put the selected value text representation in the input
changeInputOnMove boolean true Put the active value text representation in the input
openLinkInNewTab boolean false Open links in a new window/tab
selectOnBlur boolean true Automatically select the active value on blur
showCategoryHeader boolean true Show categories header in the dropdown menu

Methods

Bower

To use with Bower. Add to your bower.json file:

AngularJS

An AngularJS directive for the Bootstrap 3 Typeahead jQuery plugin can be found at https://github.com/davidkonrad/angular-bootstrap3-typeahead.

Bloodhound

Bloodhound is the 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:

Bootstrap Tags Input

Bootstrap Tags Input 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:

or

See also: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/40

All versions of bootstrap-3-typeahead with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package bassjobsen/bootstrap-3-typeahead contains the following files

Loading the files please wait ....