Skip to content

Instantly share code, notes, and snippets.

@vickramravichandran

vickramravichandran/app.html

Last active December 18, 2017 17:07
Show Gist options
  • Save vickramravichandran/0a09056ec818885191e504a398ade71a to your computer and use it in GitHub Desktop.
Save vickramravichandran/0a09056ec818885191e504a398ade71a to your computer and use it in GitHub Desktop.
Download ZIP
Simple List using anglar-auto-complete
Raw
app.html
<html lang="en">
<head>
<title>angular-auto-complete [Simple List]</title>
<!-- angular-auto-complete.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angular-auto-complete@1.5.5/angular-auto-complete.css" />
<!-- angular -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.11/angular-sanitize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- angular-auto-complete -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-auto-complete@1.5.5/angular-auto-complete.min.js"></script>
<!-- app.js -->
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainCtrl as vm">
<input type="text"
ng-model="vm.selectedColor"
placeholder="Color"
auto-complete="vm.autoCompleteOptions" />
</div>
</body>
</html>
Raw
app.js
// polyfill for String.prototype.startsWith
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
(function () {
'use strict';
angular
.module('mainApp', ['autoCompleteModule'])
.controller('MainCtrl', function() {
var that = this;
var CSS_COLORS = ['RED', 'ROYALBLUE', 'GREEN', 'GRAY', 'BLUE', 'BROWN'];
that.selectedColor = null;
that.autoCompleteOptions = {
minimumChars: 1,
data: function (searchText) {
searchText = searchText.toUpperCase();
return _.filter(CSS_COLORS, function (color) {
return color.startsWith(searchText);
});
}
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment