Fork me on GitHub

Angucomplete Alt

Awesome Autocompleteness for AngularJS

A minimal looking autocomplete directive originally developed by Daryl Rowland as Angucomplete, and I added a few tweaks to it and renamed it to angucomplete-alt.

Example 1 - Countries of the World

<div angucomplete-alt id="ex1"
  placeholder="Search countries"
  maxlength="50"
  pause="100"
  selected-object="selectedCountry"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"></div>
You selected {{selectedCountry.originalObject.name}} which has a country code of {{selectedCountry.originalObject.code}}

Example 2 - Custom Search

<div angucomplete-alt id="ex2"
  placeholder="Search people"
  pause="300"
  selected-object="selectedPerson"
  local-data="people"
  local-search="localSearch"
  title-field="firstName,surname"
  description-field="twitter"
  image-field="pic"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight">
</div>

// search function to match full text
$scope.localSearch = function(str, people) {
  var matches = [];
  people.forEach(function(person) {
    var fullName = person.firstName + ' ' + person.surname;
    if ((person.firstName.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0) ||
        (person.surname.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0) ||
        (fullName.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0)) {
      matches.push(person);
    }
  });
  return matches;
};
You selected {{selectedPerson.originalObject.firstName}} {{selectedPerson.originalObject.surname}}

Example 3 - Clear Result on Selection

<div angucomplete-alt id="ex3"
  placeholder="Search countries"
  pause="100"
  selected-object="selectedCountry3"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  clear-selected="true">
</div>
You selected {{selectedCountry3.originalObject.name}} which has a country code of {{selectedCountry3.originalObject.code}}

Example 4 - Override Suggestion with Clear Results

<div angucomplete-alt
  id="ex4"
  placeholder="Search countries"
  pause="100"
  selected-object="selectedCountry4"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  override-suggestions="true"
  clear-selected="true">
</div>
You selected {{selectedCountry4.originalObject}}

Example 5 - Using GitHub Search API

<div angucomplete-alt
  id="ex5"
  placeholder="Search projects"
  pause="500"
  selected-object="selectedProject"
  remote-url="https://api.github.com/search/repositories"
  remote-url-request-formatter="remoteUrlRequestFn"
  remote-url-data-field="items"
  title-field="name"
  description-field="description"
  minlength="2"
  input-class="form-control form-control-small"
  match-class="highlight">
</div>
Repository: {{selectedProject.originalObject.git_url}}

Example 6 - Show Matches in Both Name and Description

<div angucomplete-alt
  id="ex6"
  placeholder="Search countries"
  pause="100"
  selected-object="selectedCountry6"
  local-data="countries"
  search-fields="name,code"
  title-field="name"
  description-field="code"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight">
</div>
You selected {{selectedCountry6.title}} which has a country code of {{selectedCountry6.description}}

Example 7 - Callback

<div angucomplete-alt
  id="ex7"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight">
</div>

<form name="form">
  <h3><a name="example8" class="page-anchor">Example 8 - Required</a><span ng-show="form.$valid" class="valid-status valid">[VALID]</span><span class="valid-status invalid" ng-show="form.$invalid">[INVALID]</span></h3>
  <div class="padded-row">
    <span>Choose two countries</span>
    <div angucomplete-alt
      id="ex8a"
      placeholder="Search countries"
      pause="100"
      selected-object="countrySelected8a"
      local-data="countries"
      search-fields="name"
      title-field="name"
      minlength="1"
      input-class="form-control form-control-small"
      match-class="highlight"
      field-required="true"
      input-name="country8a">
    </div>

    <div angucomplete-alt
      id="ex8b"
      placeholder="Search countries"
      pause="100"
      selected-object="countrySelected8b"
      local-data="countries"
      search-fields="name"
      title-field="name"
      minlength="1"
      input-class="form-control form-control-small"
      match-class="highlight"
      field-required="true"
      input-name="country8b">
    </div>
  </div>
</form>

Example 8 - Required[VALID][INVALID]

Choose two countries

Example 9 - Initial Value

<div angucomplete-alt
  id="ex9"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelectedFn9"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  initial-value="countrySelected9">
</div>
You selected {{countrySelected9.name}}

Example 10 - Track Input Changescurrent input field value: {{ console10 }}

<div angucomplete-alt
  id="ex10"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected10"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  input-changed="inputChanged">
</div>

Example 11 - Auto Match

<div angucomplete-alt
  id="ex11"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected11"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="2"
  input-class="form-control form-control-small"
  match-class="highlight"
  auto-match="true">
</div>
You selected {{countrySelected11.originalObject.name}} which has a country code of {{countrySelected11.originalObject.code}}

Example 12 - Track Input Focusinput field focus state: {{ focusState }}

<div angucomplete-alt
  id="ex12"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected12"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small small-input"
  match-class="highlight"
  focus-in="focusIn()"
  focus-out="focusOut()">
</div>

Example 13 - Disable/Enable Inputdisable 

<div angucomplete-alt
  id="ex13"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected13"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  disable-input="disableInput">
</div>
You selected {{countrySelected13.originalObject.name}} which has a country code of {{countrySelected13.originalObject.code}}

Example 14 - Custom template

<div angucomplete-alt
  id="ex14"
  placeholder="Search countries"
  pause="100"
  selected-object="countrySelected14"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight"
  template-url="/my-custom-template.html">
</div>
You selected {{countrySelected14.originalObject.name}} which has a country code of {{countrySelected14.originalObject.code}} You selected a custom country {{countrySelected14.originalObject.name}}

Example 15 - Clear Input on Button Click

<div angucomplete-alt id="ex15"
  placeholder="Search countries"
  maxlength="50"
  pause="100"
  selected-object="selectedCountry15"
  local-data="countries"
  search-fields="name"
  title-field="name"
  minlength="1"
  input-class="form-control form-control-small"
  match-class="highlight">
</div>
You selected {{selectedCountry15.originalObject.name}} which has a country code of {{selectedCountry15.originalObject.code}}

Example 16 - Change Input on Button Click

<div angucomplete-alt id="ex16"
   placeholder="Search countries"
   maxlength="50"
   pause="100"
   selected-object="selectedCountry16"
   initial-value="selectedCountry16"
   local-data="countries"
   search-fields="name"
   title-field="name"
   minlength="1"
   input-class="form-control form-control-small"
   match-class="highlight">
</div>
You selected {{selectedCountry16.originalObject.name}} which has a country code of {{selectedCountry16.originalObject.code}}
Originally developed by Daryl Rowland (@darylrowland)
Forked and developed by Hidenari Nozaki (@ghiden)