angucomplete-alt
Version:
Awesome Autocompleteness for AngularJS
675 lines (617 loc) • 27.7 kB
HTML
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" id="ng-app" ng-app="app"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app="app"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app="app"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" id="ng-app" ng-app="app"> <!--<![endif]-->
<head>
<title>Angucomplete Alt: Autocomplete Directive for AngularJS</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel="stylesheet" href="css/structure.css"/>
<link rel="stylesheet" href="css/angucomplete-alt.css"/>
<link rel="stylesheet" href="fonts/bariol/bariol.css"/>
</head>
<body ng-controller="MainController">
<!--[if lt IE 9]>
<script src="js/libs/es5-shim.min.js"></script>
<script src="js/libs/json3.min.js"></script>
<![endif]-->
<a href="https://github.com/ghiden/angucomplete-alt"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<div>
<h1>Angucomplete Alt</h1>
<h2>Awesome Autocompleteness for AngularJS</h2>
<p>
A minimal looking autocomplete directive originally developed by Daryl Rowland as <a href="https://github.com/darylrowland/angucomplete">Angucomplete</a>, and I added a few tweaks to it and renamed it to <a href="https://github.com/ghiden/angucomplete-alt">angucomplete-alt</a>.
</p>
<div>
<ul>
<li><a href="#example1">Example 1 - Countries of the World</a></li>
<li><a href="#example2">Example 2 - Custom Search</a></li>
<li><a href="#example3">Example 3 - Clear Result on Selection</a></li>
<li><a href="#example4">Example 4 - Override Suggestions with Clear Result</a></li>
<li><a href="#example5">Example 5 - Using GitHub Search API</a></li>
<li><a href="#example6">Example 6 - Show Matches in Both Name and Description</a></li>
<li><a href="#example7">Example 7 - Callback</a></li>
<li><a href="#example8">Example 8 - Required</a></li>
<li><a href="#example9">Example 9 - Initial Value</a></li>
<li><a href="#example10">Example 10 - Track Input Changes</a></li>
<li><a href="#example11">Example 11 - Auto Match</a></li>
<li><a href="#example12">Example 12 - Track Input Focus</a></li>
<li><a href="#example13">Example 13 - Disable/Enable Input</a></li>
<li><a href="#example14">Example 14 - Custom Template</a></li>
<li><a href="#example15">Example 15 - Clear Input on Button Click</a></li>
<li><a href="#example16">Example 16 - Change Input on Button Click</a></li>
</ul>
</div>
<div class="large-padded-row">
<h3><a name="example1" class="page-anchor">Example 1 - Countries of the World</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div ng-show="selectedCountry">
You selected <span class="bold-span">{{selectedCountry.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry.originalObject.code}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example2" class="page-anchor">Example 2 - Custom Search</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
<div class="padded-row">
<pre>
// 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;
};
</pre>
</div>
<div class="padded-row">
<div angucomplete-alt id="ex2" placeholder="Search people" pause="300" selected-object="selectedPerson" local-data="people" title-field="firstName,surname" description-field="twitter" image-field="pic" minlength="1" input-class="form-control form-control-small" match-class="highlight" local-search="localSearch">
</div>
</div>
<div class="result">
<div class="" ng-show="selectedPerson">
You selected <span class="bold-span">{{selectedPerson.originalObject.firstName}} {{selectedPerson.originalObject.surname}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example3" class="page-anchor">Example 3 - Clear Result on Selection</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div class="" ng-show="selectedCountry3">
You selected <span class="bold-span">{{selectedCountry3.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry3.originalObject.code}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example4" class="page-anchor">Example 4 - Override Suggestion with Clear Results</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div class="" ng-show="selectedCountry4">
You selected <span class="bold-span">{{selectedCountry4.originalObject}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example5" class="page-anchor">Example 5 - Using GitHub Search API</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div class="" ng-show="selectedProject">
Repository: <span class="bold-span">{{selectedProject.originalObject.git_url}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example6" class="page-anchor">Example 6 - Show Matches in Both Name and Description</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div class="" ng-show="selectedCountry6">
You selected <span class="bold-span">{{selectedCountry6.title}}</span> which has a country code of <span class="bold-span">{{selectedCountry6.description}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example7" class="page-anchor">Example 7 - Callback</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
</div>
<div class="large-padded-row">
<pre>
<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>
</pre>
<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>
</div>
<div class="large-padded-row">
<h3><a name="example9" class="page-anchor">Example 9 - Initial Value</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div class="" ng-show="countrySelected9">
You selected <span class="bold-span">{{countrySelected9.name}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example10" class="page-anchor">Example 10 - Track Input Changes<span class="console">current input field value: {{ console10 }}</span></a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
<div class="padded-row">
<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>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example11" class="page-anchor">Example 11 - Auto Match</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div ng-show="countrySelected11">
You selected <span class="bold-span">{{countrySelected11.originalObject.name}}</span> which has a country code of <span class="bold-span">{{countrySelected11.originalObject.code}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example12" class="page-anchor">Example 12 - Track Input Focus<span class="console">input field focus state: {{ focusState }}</span></a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
<div class="padded-row">
<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>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example13" class="page-anchor">Example 13 - Disable/Enable Input<span class="console">disable <input type="checkbox" ng-model="disableInput"></span></a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<div ng-show="countrySelected13">
You selected <span class="bold-span">{{countrySelected13.originalObject.name}}</span> which has a country code of <span class="bold-span">{{countrySelected13.originalObject.code}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example14" class="page-anchor">Example 14 - Custom template</a></h3>
<div class="padded-row">
<script type="text/ng-template" id="/my-custom-template.html">
<div class="angucomplete-holder" ng-class="{'angucomplete-dropdown-visible': showDropdown}">
<p>This is custom</p>
<input ng-model="searchStr"
ng-disabled="disableInput"
type="text"
placeholder="{{placeholder}}"
ng-focus="onFocusHandler()"
class="{{inputClass}}"
ng-focus="resetHideResults()"
ng-blur="hideResults($event)"
autocapitalize="off"
autocorrect="off"
autocomplete="off"
ng-change="inputChangeHandler(searchStr)"/>
<div class="angucomplete-dropdown" ng-show="showDropdown">
<div class="angucomplete-searching" ng-show="searching" ng-bind="textSearching"></div>
<div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)" ng-bind="textNoResults"></div>
<div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseenter="hoverRow($index)" ng-class="{'angucomplete-selected-row': $index == currentIndex}">
<div ng-if="imageField" class="angucomplete-image-holder">
<img ng-if="result.image && result.image != ''" ng-src="{{result.image}}" class="angucomplete-image"/>
<div ng-if="!result.image && result.image != ''" class="angucomplete-image-default"></div>
</div>
<div class="angucomplete-title" ng-if="matchClass" ng-bind-html="result.title"></div>
<div class="angucomplete-title" ng-if="!matchClass">{{ result.title }}</div>
<div ng-if="matchClass && result.description && result.description != ''" class="angucomplete-description" ng-bind-html="result.description"></div>
<div ng-if="!matchClass && result.description && result.description != ''" class="angucomplete-description">{{result.description}}</div>
</div>
<div class="angucomplete-row" ng-click="selectResult({title: searchStr, originalObject: { name: searchStr, custom: true }})" ng-mouseenter="hoverRow(results.length)" ng-class="{'angucomplete-selected-row': results.length == currentIndex}">
<div class="angucomplete-title">Select custom country '{{ searchStr }}'</div>
</div>
</div>
</div>
</script>
</div>
</div>
<div class="large-padded-row">
<pre>
<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>
</pre>
</div>
<div class="large-padded-row">
<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>
<div class="result">
<div ng-show="countrySelected14">
<span ng-if="!countrySelected14.originalObject.custom">
You selected <span class="bold-span">{{countrySelected14.originalObject.name}}</span> which has a country code of <span class="bold-span">{{countrySelected14.originalObject.code}}</span>
</span>
<span ng-if="countrySelected14.originalObject.custom">
You selected a custom country <span class="bold-span">{{countrySelected14.originalObject.name}}</span>
</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example15" class="page-anchor">Example 15 - Clear Input on Button Click</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<label><small>This should clear the input and set the bound values to '' or null</small></label>
<button class="btn btn-blue btn-slim" ng-click="clearInput('ex15')">Clear #ex15</button>
<button class="btn btn-blue btn-slim" ng-click="clearInput()">Clear all</button>
</div>
<div class="result">
<div ng-show="selectedCountry15">
You selected <span class="bold-span">{{selectedCountry15.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry15.originalObject.code}}</span>
</div>
</div>
</div>
<div class="large-padded-row">
<h3><a name="example16" class="page-anchor">Example 16 - Change Input on Button Click</a></h3>
<div class="padded-row">
<pre>
<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>
</pre>
</div>
<div class="padded-row">
<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>
</div>
<div class="result">
<label><small>This should change the input</small></label>
<button class="btn btn-blue btn-slim" ng-click="changeInput('ex16')">Change #ex16</button>
</div>
<div class="result">
<div ng-show="selectedCountry16">
You selected <span class="bold-span">{{selectedCountry16.originalObject.name}}</span> <span ng-show="selectedCountry16.originalObject.code">which has a country code of <span class="bold-span">{{selectedCountry16.originalObject.code}}</span></span>
</div>
</div>
</div>
<div class="very-large-padded-row">
<h5>Originally developed by Daryl Rowland (<a href="http://twitter.com/darylrowland">@darylrowland</a>)</h5>
<h5>Forked and developed by Hidenari Nozaki (<a href="http://twitter.com/ghiden">@ghiden</a>)</h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-touch.min.js"></script>
<script src="js/libs/angucomplete-alt.js"></script>
<script src="js/app.js"></script>
</div>
</body>
</html>