ampersand-autocomplete-view

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