Nocturnal Pumpkin Maelstrom

    ampersand-autocomplete-view

    0.0.3 • Public • Published

    ampersand-autocomplete-view

    An ampersand autocomplete view.

    Install

    npm install ampersand-autocomplete-view
    

    Example

    var AutoCompleteView = require('../ampersand-autocomplete-view');
    var FormView = require('ampersand-form-view');
     
    var Model = require('ampersand-state').extend({
      props: {
        mbid: 'string',
        name: 'string',
        listeners: 'string'
      },
      derived: {
        id: function() {
          return this.name;
        }
      }
    });
     
    var Collection = require('ampersand-rest-collection').extend({
      model: Model,
      url: 'http://ws.audioscrobbler.com/2.0/?method=artist.search&api_key=cef6d600c717ecadfbe965380c9bac8b&format=json',
      parse: function(response, options) {
        if (response.results) {
          return response.results.artistmatches.artist;
        }
      }
    });
     
    var BaseView = FormView.extend({
      fields: function () {
        return [
          new AutoCompleteView({
            name: 'autocomplete',
            parent: this,
            options: new Collection(),
            queryKey: 'artist',
            idAttribute: 'name',
            textAttribute: 'name',
            placeHolder: 'Please choose one',
            minKeywordLength: 3,
            maxResults: 10
          })
        ];
      }
    });
     
    document.addEventListener('DOMContentLoaded', function () {
      var baseView = new BaseView({el: document.body });
      baseView.on('all', function (name, field) {
        console.log('Got event', name, field.value, field.valid);
      });
      baseView.render();
    });
     

    Demo

    npm run demo
    

    Credits

    Written by @pjepsen

    License

    MIT

    Install

    npm i ampersand-autocomplete-view

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • himanshu_jain
    • cmclay
    • retslybot
    • amartens
    • jay.lee
    • jwleddy
    • chrislaue
    • jkhwan
    • kregensberg
    • lvivier
    • eanh
    • arpitsingh1
    • theo-ng
    • nichole
    • keithm
    • enfinlay
    • davorind