Bootcomplete

A simple angular autocomplete made for bootstrap3

Demo

Features

• Seamless integration with bootstrap3 and font-awesome, no extra css needed
• Zero configuration setup for basic usage
• Highlighted keyword in suggestions
• Configurable label for suggestions
• Close with esc key, blur or tab
• Selection with enter key or click
• No results message
• UI indication during search
• Advanced usage with custom templates

Requirements

• Bootstrap
• Font awesome

Basic usage

Install for Bower users,

bower install bootcomplete

Simply include the script in your angular application

<scriptsrc="path_to_the_library/dist/bootcomplete.min.js"></script>

And then add the module as a dependency

varapp=angular.module("App",["bootcomplete"]);

Place the autocomplete directive in your view

<bootcompletebtc-minlength="1"
btc-maxresults="5"
btc-size="md"
btc-label="label"
btc-placeholder="Search for something..." btc-query="queryFunction" btc-callback="callbackFunction"
btc-noresults="No results!"
ng-model="modelvariable"></bootcomplete>

Define in your controller the query function (you should return a promise) with the searchstring as a parameter. In this example ENDPOINT is a factory

$scope.queryFunction=function(searchstring){returnENDPOINT.query({param: searchstring}).$promise;};

Optionally define a callback function that runs after a selection

$scope.callbackFunction=function(){console.log('callback fired!');};

Advanced usage

You can specify a custom template to display the suggestions using the results array. Any bootstrap/non-boostrap html is accepted, for example

<divclass="media" ng-repeat="result in results"><divclass="media-left media-middle"><ahref="#"><imgclass="media-object" src="{{result.image}}"></a></div><divclass="media-body"><h4class="media-heading">{{result.title}}</h4>
{{result.text}}
<p><ahref="" class="btc-clickLink" ng-click="select($index)"></a></p></div></div>

classname "btc-clickLink" id required on any link that fires the selection. See index.html, src/app.js, src/forecast.html for a usage examples

Options

btc-minlength

Type: String

The minimum character length needed before triggering autocomplete suggestion (default: 1)

btc-maxresults

Type: String

The max number of items to display

btc-size

Type: String

Boostrap input group size (sm,md,lg)

btc-label

Type: String

The object property to display in the suggestions (ignored when using a custom template)

btc-keepselection

Type: String

If set to true, keeps the result label as the value of the input: suggested for an item field in a form. In this case the input won't be cleared after closing the suggestions.

btc-placeholder

Type: String

Input placeholder

btc-query

Type: String

search function

btc-callback

Type: String

callback function fired after the selection: the full result is passed as paramter

btc-noresults

Type: String

String to display when the are no results (default: Your search yielded no results, ignored when using a custom template)

btc-template

Type: String

custom template url to display suggestions