Extremely fast Auto Complete for Angular-js applications

MassAutocompleten angular directive

MassAutocomplete

Stars : 10

Forks : 10

Created by hakib

bower install angular-mass-autocomplete

Demo Download GitHub

Motivation

MassAutocomplete was created as part of a new project that required auto completing a lot of input fields.

Most existing auto complete implementations (12) are wrapping the input field and appending a suggestion box along with several watches. This is fine as long as you want to auto-complete only one or two inputs. But, when there are several dozen inputs, the memory, DOM and watch count will start to bloat and that might impact performance.

A different approach

MassAutocomplete was implemented with a different approach in mind. Instead of attaching the suggestion box to each input field, we use transclusion to maintain only one box for the entire document. This approach guarantees that additional input fields will not require additional DOM or watches for the purpose of the auto complete.

MassAutocomplete does not provide filtering, linking, ranking or sorting. Generating the suggestions is left to the application.

Comparing implementations

We performed a comparison between mass-autocomplete and the popular ui-typehead.

The results are here.

Options

mass-autocomplete=options
debounce_position(150) Debounce in ms for repositioning suggestion box on window resize.
debounce_attach(300) Debounce in ms for attaching input after focus.
Prevents unnecessary positioning when quickly jumping between inputs using tab.
debounce_suggest(200) Debounce in ms for calling suggest.
Useful for remote sources and to suspend suggestions while user is typing.
debounce_blur(150) Debounce in ms for detach on blur.
Determines the amount of time in milliseconds before losing focus as a result of selecting from the menu until detach is invoked.
mass-autocomplete-item=options_name
suggest(term) Receive a string and return an array of suggestions.

Each suggestion must contain

  • value - Text to display in the textbox.
  • label - String or trusted HTML to display in the suggestion box.

 

The label is bound using ng-bind-html - to bind raw html use $sce.trustAsHtml().

The return value is an array of objects or a promise that resolves to an array of objects.

The object is passed to the on_select callback so additional properties can be used.

on_attach() Callback fired when the user focus a field.
on_select(selected_item) Callback fired when the user select an item from the suggestion box.
on_detach(current_value) Callback fired when the input field is blurred. Useful for purging caches.
on_error() Callback fired in case suggest() fails.

MassAutocomplete

Autocomplete for Angular.js applications with a lot to complete.

http://hakib.github.io/MassAutocomplete

Javscript

Javascript plugin

Angular-js