search

aupac / ember-aupac-typeahead

ember-cli ajax typeahead search component
MIT License
25 stars 38 forks source link

readme

ember-aupac-typeahead

NPM package Build Status Ember Observer Score

alt tag

A typeahead.js autocomplete for ember. Updated to work with maintained fork corejs-typeahead)

Demo HERE

Installation

ember install ember-aupac-typeahead

Prerequisites

aupac-ember-data-typeahead component

The aupac-ember-data-typeahead component is an extension of the more generic aupac-typeahead and assumes you're using ember-data to retrieve your data remotely. This allows ember-data users to streamline the use of this component into a single line of code in their template.

Component Attributes

By default, each ember-data model supplied in modelClass is required to have a displayName (computed property or attribute) that will return a string representing the name to display in the suggestion template. If this is not possible you can override the suggestionTemplate and supply something else (see below).

In addition to all the features supported by aupac-typeahead (see below), aupac-ember-data-typeahead supports the following:

This component has already implemented the relevant functions to make them compatible with ember-data. You do not need to do so yourself.

Usage example

<!--In this case the ember-data model "task" needs a displayName attribute-->
{{aupac-ember-data-typeahead modelClass='task' action=(action (mut selection))}}

The above is all you need to have a fully functional autocomplete search in your page. It would create an input that allows you to search for tasks and when selected would update the selection property on your controller.

aupac-typeahead component

The aupac-typeahead component contains no assumptions about how you're retrieving your data. Both local and remote suggestions are supported.

Component Attributes

See the typeahead docs for a more complete description of the items below.

See the typeahead docs for a more complete description of the items below.

Example

In your template

{{aupac-typeahead action=(action (mut country))
  class='form-control'
  source=countrySource
  placeholder='Search for a country'}}

In your controller

const countries = Ember.A(["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas"
  ,"Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands"
  ,"Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica"
  ,"Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea"
  ,"Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana"
  ,"Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India"
  ,"Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia"
  ,"Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania"
  ,"Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia"
  ,"New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"
  ,"Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles"
  ,"Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan"
  ,"Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia"
  ,"Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)"
  ,"Yemen","Zambia","Zimbabwe"]);

export default Ember.Controller.extend({

  country : null,
  countrySource : function(query, syncResults, asyncResults) {
    const regex = new RegExp(`.*${query}.*`, 'i');
    const results = countries.filter((item, index, enumerable) => {
      return regex.test(item);
    })
    syncResults(results);
  }

});

Using your own custom template

You can override the suggestionTemplate, notFoundTemplate, pendingTemplate, headerTemplate or footerTemplate used by importing a *.hbs file and assigning to the appropriate property.

For example

{{!-- app/templates/country-templates/suggestion.hbs --}}
<div class='typeahead-suggestion'><img src="http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200" style="width: 10%; height: 10%">{{model.displayName}}</div>

Then in your controller

import customSuggestionTemplate from '../templates/country-templates/suggestion';

export default Ember.Controller.extend({

  customSuggestionTemplate: customSuggestionTemplate

})

And assign it to your template

{{aupac-typeahead action=(action (mut country))
... bind the custom suggestion template to the component
suggestionTemplate=customSuggestionTemplate
}}

Using your own version of typeahead.js

You can disable the importing of typeahead.js by adding the following to your ember-cli-build.js

'ember-aupac-typeahead' : {
  includeTypeahead: false
}

The current compatible typeahead.js version is v0.11.1

CSS Styling

By default, Bootstrap 3 compatible css styles are included with the addon, you can disable this by adding:

'ember-aupac-typeahead' : {
  includeCss: false
}

See the typeahead.js docs for applying your own custom styling.

Testing

ember-cli-page-object is supported

test/pages/aupac-typeahead.js

export function typeahead(selector, options) {
  return {
    search : function(search) {
      $(selector).val(search).trigger('input');
    },
    suggestions : collection({
      scope: '', //Reset to global scope
      itemScope: '.tt-suggestion',
      item: {
        select: clickable()
      }
    })
  };
}

TODO - show example

Running

Running Tests

Building

For more information on using ember-cli, visit http://www.ember-cli.com/.