diff --git a/angucomplete.css b/angucomplete.css new file mode 100644 index 0000000..e0265b3 --- /dev/null +++ b/angucomplete.css @@ -0,0 +1,59 @@ +.angucomplete-holder { + position: relative; +} + +.angucomplete-dropdown { + border-color: #ececec; + border-width: 1px; + border-style: solid; + border-radius: 2px; + width: 400px; + padding: 6px; + cursor: pointer; + z-index: 9999; + position: absolute; + /*top: 32px; + left: 0px; + */ + margin-top: -6px; + background-color: #ffffff; +} + +.angucomplete-searching { + color: #acacac; + font-size: 14px; +} + +.angucomplete-description { + font-size: 14px; +} + +.angucomplete-row { + padding: 5px; + color: #000000; + margin-bottom: 4px; + +} + +.angucomplete-selected-row, .angucomplete-row:hover { + background-color: lightblue; + color: #ffffff; +} + +.angucomplete-image-holder { + padding-top: 2px; + float: left; + height: 34px; + width: 34px; + margin-right: 10px; + margin-left: 5px; +} + +.angucomplete-image { + height: 34px; + width: 34px; + border-radius: 50%; + border-color: #ececec; + border-style: solid; + border-width: 1px; +} \ No newline at end of file diff --git a/angucomplete.js b/angucomplete.js new file mode 100644 index 0000000..56111f1 --- /dev/null +++ b/angucomplete.js @@ -0,0 +1,223 @@ +/** + * Angucomplete + * Autocomplete directive for AngularJS + * By Daryl Rowland + */ + +angular.module('angucomplete', [] ) + .directive('angucomplete', function ($parse, $http) { + return { + restrict: 'EA', + scope: { + "id": "@id", + "placeholder": "@placeholder", + "selectedObject": "=selectedobject", + "url": "@url", + "titleField": "@titlefield", + "descriptionField": "@descriptionfield", + "imageField": "@imagefield", + "inputClass": "@inputclass", + "userPause": "@pause", + "localData": "=localdata", + "searchFields": "@searchfields", + "minLengthUser": "@minlength" + }, + template: '
Searching...
No results found
{{result.title}}
{{result.description}}
', + controller: function ( $scope ) { + $scope.lastFoundWord = null; + $scope.currentIndex = null; + $scope.justChanged = false; + $scope.searchTimer = null; + $scope.searching = false; + $scope.pause = 500; + $scope.minLength = 3; + + if ($scope.minLengthUser && $scope.minLengthUser != "") { + $scope.minLength = $scope.minLengthUser; + } + + if ($scope.userPause) { + $scope.pause = $scope.userPause; + } + + $scope.processResults = function(responseData) { + if (responseData && responseData.length > 0) { + $scope.results = []; + + var titleFields = []; + if ($scope.titleField && $scope.titleField != "") { + titleFields = $scope.titleField.split(","); + } + + for (var i = 0; i < responseData.length; i++) { + // Get title variables + var titleCode = ""; + + for (var t = 0; t < titleFields.length; t++) { + if (t > 0) { + titleCode = titleCode + " + ' ' + "; + } + titleCode = titleCode + "responseData[i]." + titleFields[t]; + } + + // Figure out description + var description = ""; + + if ($scope.descriptionField && $scope.descriptionField != "") { + eval("description = responseData[i]." + $scope.descriptionField); + } + + // Figure out image + var image = ""; + + if ($scope.imageField && $scope.imageField != "") { + eval("image = responseData[i]." + $scope.imageField); + } + + var resultRow = { + title: eval(titleCode), + description: description, + image: image, + originalObject: responseData[i] + } + + $scope.results[$scope.results.length] = resultRow; + } + + + } else { + $scope.results = []; + } + } + + $scope.searchTimerComplete = function(str) { + // Begin the search + + if (str.length >= $scope.minLength) { + if ($scope.localData) { + var searchFields = $scope.searchFields.split(","); + + var matches = []; + + for (var i = 0; i < $scope.localData.length; i++) { + var match = true; + + for (var s = 0; s < searchFields.length; s++) { + var evalStr = 'match = ($scope.localData[i].' + searchFields[s] + '.toLowerCase().indexOf("' + str.toLowerCase() + '") >= 0)'; + eval(evalStr); + } + + if (match) { + matches[matches.length] = $scope.localData[i]; + } + } + + $scope.searching = false; + $scope.processResults(matches); + $scope.$apply(); + + + } else { + $http.get($scope.url + str, {}). + success(function(responseData, status, headers, config) { + $scope.searching = false; + $scope.processResults(responseData); + }). + error(function(data, status, headers, config) { + console.log("error"); + }); + } + } + + } + + $scope.hoverRow = function(index) { + $scope.currentIndex = index; + } + + $scope.keyPressed = function(event) { + if (!(event.which == 38 || event.which == 40 || event.which == 13)) { + if (!$scope.searchStr || $scope.searchStr == "") { + $scope.showDropdown = false; + } else { + + if ($scope.searchStr.length >= $scope.minLength) { + $scope.showDropdown = true; + $scope.currentIndex = -1; + $scope.results = []; + + if ($scope.searchTimer) { + clearTimeout($scope.searchTimer); + } + + $scope.searching = true; + + $scope.searchTimer = setTimeout(function() { + $scope.searchTimerComplete($scope.searchStr); + }, $scope.pause); + } + + + } + + } else { + event.preventDefault(); + } + } + + $scope.selectResult = function(result) { + $scope.searchStr = result.title; + $scope.selectedObject = result; + $scope.showDropdown = false; + $scope.results = []; + //$scope.$apply(); + } + }, + + link: function($scope, elem, attrs, ctrl) { + + elem.bind("keyup", function (event) { + if(event.which === 40) { + if (($scope.currentIndex + 1) < $scope.results.length) { + $scope.currentIndex ++; + $scope.$apply(); + event.preventDefault; + event.stopPropagation(); + } + + $scope.$apply(); + } else if(event.which == 38) { + if ($scope.currentIndex >= 1) { + $scope.currentIndex --; + $scope.$apply(); + event.preventDefault; + event.stopPropagation(); + } + + } else if (event.which == 13) { + if ($scope.currentIndex >= 0 && $scope.currentIndex < $scope.results.length) { + $scope.selectResult($scope.results[$scope.currentIndex]); + $scope.$apply(); + event.preventDefault; + event.stopPropagation(); + } else { + $scope.results = []; + $scope.$apply(); + event.preventDefault; + event.stopPropagation(); + } + + } else if (event.which == 27) { + $scope.results = []; + $scope.showDropdown = false; + $scope.$apply(); + } else if (event.which == 8) { + $scope.selectedObject = null; + $scope.$apply(); + } + }); + + + } + }; +}); \ No newline at end of file