Typeahead

components.typeahead-c.js

import Ember from 'ember';

const countries = Ember.A(["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas",
  "Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & 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 & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles",
  "Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan",
  "Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia",
  "Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)",
  "Yemen","Zambia","Zimbabwe"]);

export default Ember.Component.extend({
  //Country Search
  country : null,
  countrySource : function(query, syncResults /*, asyncResults*/) {
    const regex = new RegExp(`.*${query}.*`, 'i');
    const results = countries.filter(function(item /*, index, enumerable*/) {
      return regex.test(item);
    });
    syncResults(results);
  },

  isDisabled: false,
  allowFreeInput: false,

  actions: {
    clearModel() {
      this.set('task', null);
    },
    onClick(selectedCountry) {
      this.set('country', selectedCountry);
      consol.log(JSON.stringify(selectedCountry));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({

});

templates.application.hbs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

{{typeahead-c}}

templates.components.typeahead-c.hbs

<div class="container">
  <h2>Typeahead example</h2>
  <div class="panel panel-default">
  <br>
    <div class="panel-heading">
      <h4>Searching a local array</h4>
    </div>
    <br>
    <div class="panel-body">
    
      <div class="col-xs-12 m-b-1">
        <h5>{{if country (concat "Item " country " was") "No item" }} selected!</h5>
      </div>
      
      {{input type="checkbox" checked=allowFreeInput}} Allow Free Input?
      
      <br><br>
      
      <div class="col-xs-12 m-t-1">
        {{#aupac-control label="Country" mandatory=true errors=errors.country leftIcon="glyphicon glyphicon-search" }}
          {{aupac-typeahead action=(action "onClick")
              class='form-control'
              source=countrySource
              placeholder='Search for a country'
              allowFreeInput=allowFreeInput
          }}
        {{/aupac-control}}
      </div>
      
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-aupac-typeahead": "3.0.0"
  }
}