Created by hakib
bower install angular-mass-autocompleteHome Demo Download GitHub
MassAutocomplete was created as part of a new project that required auto completing a lot of input fields.
Most existing auto complete implementations (1, 2) 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.
We performed a comparison between mass-autocomplete and the popular ui-typehead.
|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.
|suggest(term)||Receive a string and return an array of suggestions.|
Each suggestion must contain
The label is bound using
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_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 |
Autocomplete for Angular.js applications with a lot to complete.