Angular Autocomplete
A rough draft of an autocomplete directive I was working on for the HR management system for MPU.
by kshep92
HTML
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div ng-app="autocomplete">
<div class="suggest">
Country name: <input type=text name=query ng-keydown=focusSuggestions($event) autocomplete=off id=txtInput ng-model=name />
<div class=suggestions>
<input class=suggestion type=radio id=sg_1 data-number=1 data-name=Kevin ng-keydown=scrollSuggestions($event) ng-click=hideSuggestions() /> Suggestion #1
<input class=suggestion type=radio id=sg_2 data-number=2 data-name=John ng-keydown=scrollSuggestions($event) ng-click=hideSuggestions() /> Suggestion #2
<input class=suggestion type=radio id=sg_3 data-number=3 data-name=James ng-keydown=scrollSuggestions($event) ng-click=hideSuggestions() /> Suggestion #3
</div>
{{number}} - {{name}}
</div>
</div>
<script type=text/javascript>
var app = angular.module("autocomplete", []);
app.directive("suggest", function() {
return {
restrict: "C",
link: function(scope, elm, attrs) {
var $target = $("input#txtInput").next("div.suggestions");
var $entryField = $("input#txtInput");
scope.number = null;
scope.focusSuggestions = function(evt) {
if(evt.keyCode == 40) {
var suggestionElm = $target.find("input.suggestion")[0];
$(suggestionElm).focus();
scope.setSuggestion(suggestionElm);
}
}
scope.setSuggestion = function(element) {
if(element != null) { scope.number = $(element).data("number");
scope.name = $(element).data("name");
}
}
scope.scrollSuggestions = function(evt) {
evt.preventDefault();
var nextSuggestion = null;
if(evt.keyCode == 40) {
nextSuggestion =...