knockout.typeahead

    4.2.1 • Public • Published

    Knockout Typeahead Binding

    Simple knockout binding which wraps Twitter typeahead.js

    Installation

    npm install knockout.typeahead
    

    Usage

    Include in your bundle with browserify or webpack. You will need to have a loader configured for less files in order to get styling from the included stylesheet, or you can bring your own.

    <input data-bind="value: myValue, typeahead: autocompleteMyValue" />

    with a view model that looks like this:

    function ViewModel() {
        this.myValue = ko.observable();
        this.autocompleteMyValue = '/my/server/url?value=%QUERY';
    }

    If the remote endpoint you are querying is returning a complex object instead of an array of suggestions, you can pass a remoteFilter parameter to the binding, a function on your view model which returns the portion of the response object containing the array of suggestions.

    If you are returning complex objects as suggestions, pass a templateName into the binding to use a custom template.

    <input data-bind="value: myValue, typeahead: autocompleteMyValue, remoteFilter: pluckResults, templateName: 'my-suggestion-template'" />

    Clone the repository then npm i && npm run start to build the example.

    Additional Binding Options

    • function mappingFunction: Function on your model which will map the suggestion data returned from your queries (e.g. so you can use computed observables and extenders in your template)
    • string displayKey: Property name on complex object suggestion data which will be used to populate the hint/value of the typeahead input.

    Install

    npm i knockout.typeahead

    DownloadsWeekly Downloads

    1

    Version

    4.2.1

    License

    MIT

    Last publish

    Collaborators

    • chadly
    • mdarens
    • tullo_x86