Neural Processing Mechanisms
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    backbone-autocompletepublic

    NPM

    Build Status

    Backbone Autocomplete View

    Backbone Autocomplete view made with browserify style projects in mind.

    It's a very straight up nested view with a filtered collection.

    Usage

    The view exposes a simple API. It's instanciated with a pre-existing collection, and when subclassing you are able to override some of its internal methods for your own logic.

    Instantiation

    The view takes standard parameters, collection etc, and also an option minimumInputLength if you want to restrict searching until the input length is above a certain value. It defaults to zero (this might not be so great).

    By default, the view uses a field called 'name' from the models in the collection for searching. If you want to set your own, you can pass it as searchField when instantiating.

    onSelect(<model>)

    Callback fired by the view when a user selects something by clicking on it, or by pressing enter after using the arrow keys

    searchMethod(<model>)

    Method bound to the view instance, which is passed to this.collection.filter(..) as the method to determine if the model from the parent collection should be included in the results. The current value of the user input box is available on this.searchValue. Example below.

     
    var AutocompleteView = require('backbone-autocomplete');
     
    // example in browserified code 
    var someNames = new Backbone.Collection([{
        person: 'Bob'
    },{
        person: 'Barry'
    },{
        person: 'Alfred'
    },{
        person: 'James'
    },{
        person: 'Sylvia'
    },{
        person: 'Maureen'
    },{
        person: 'Alice'
    }])
     
    var MyAutocomplete = AutocompleteView.extend({
        onSelect: function(model){
            console.log(model); 
        },
        searchMethod: function(model){ // method passed to filter(..) on the collection 
            var label = model.get(this.searchField).toLowerCase();
            // the method is bound to the view, with current value of the user input available as `this.searchValue` 
            var searchValue = this.searchValue.toLowerCase().trim(); 
     
            if (label.indexOf(searchValue) !== -1) {
                return true;
            } else {
                return false;
            }
        }
    });
     
    var nameCompletion = new MyAutocomplete({
        searchField: 'person', // setting the field to use as a search 
        collection: someNames
    });
     
    nameCompletion.render();
    document.body.appendChild(nameCompletion.el);
     

    MIT Licence (c) Dan Peddle 2014

    install

    npm i backbone-autocomplete

    Downloadslast 7 days

    7

    version

    1.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar