angular-fast-matcher demo

Attach the directive to an <input> element with the following attributes.

Required

• fast-matcher
• fast-matcher-source

  Specify either an array or promise that resolves to an array. This will be the underlying source from which autocomplete results are fetched.

• fast-matcher-output

  Specify the array to be populated with autocomplete results. If it doesn't already exist, the directive will create it.

  Note that this array will be updated in-place.

Optional

• fast-matcher-property (or fast-matcher-properties)

  The name of the property to access from each element of the underlying source. For example if the data source is an array of book objects and you want to provide autocompletion by title, you would specify 'title' here.

  You can also specify multiple properties (with fast-matcher-properties), separated by commas and/or spaces. In this case the directive will search across all properties for matches.

  You don't have to include this attribute if the data source is just a list of strings.

• fast-matcher-limit

  The maximum number of matches to find.

• fast-matcher-any-word

  Whether to support matching by any word (not just the first word) in a string.

• fast-matcher-index-changed

  An expression to evaluate, with index set to the index of the currently selected item, whenever it changes. This is to support keyboard-based selection (letting the user hit Up/Down to highlight items in the list).

• fast-matcher-item-selected

  An expression to evaluate, with item set to the selected item, when an item is selected from the list of autocompletion results. This will be called when the user selects an item and hits Enter.

Example

<div ng-controller="BooksController as ctrl">
    <input type="text"
        fast-matcher
        fast-matcher-source="books"
        fast-matcher-output="matchedBooks"
        fast-matcher-properties="author, title"
        fast-matcher-index-changed="ctrl.setCurrentBook(index)"
        fast-matcher-item-selected="ctrl.selectBook(item)" />

    <!--
        You can put this list anywhere on the page and style it however you want.
        In fact you can put it multiple places. Or nowhere. It also doesn't have to be
        a <ul> element. It can be anything.
    -->
    <ul>
        <li ng-repeat="book in matchedBooks" ng-class="{active: ctrl.isCurrentBook($index)}">
            <div class="title" ng-bind="book.title"></div>
            <div class="author" ng-bind="book.author"></div>
        </li>
    </ul>
</div>