diff --git a/README.md b/README.md index 48cc796..05ab812 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,9 @@ You can also pass a function that receives changes with the `on-type` attribute. `on-type` : *(optional)* Pass a function that will receive changes, when somebody types something. It passes the full string for any character typed or deleted. You can use that for example to update the array that you passed in data. -`on-select` : *(optional)* Pass a function that will receive changes, when a suggestion is selected. It passes the full string of the suggestion. +`on-select` : *(optional)* Pass a function that will receive changes, when a suggestion is selected. It passes the full string of the suggestion, or the object defined as the suggestion in case you define the suggestions as an array of objects. + +`render` : *(optional)* You can use data objects instead of strings to populate the suggestions array. You only have to assign an array of objects to the suggestions collection, and then define a render function that will be used to convert these objects into strings in order for the autocomplete to print them in the list. You can retrieve these objects as the first parameter in the on-select listener. If you use string suggestions you don't have to define this render function but only if you are using data objects as suggestions. `click-activation` : *(optional)* When `true`, the suggestion box opens on click (unfortunately onfoucs is not implemented properly in most browsers right now). By default it is only activated, when you start typing something. diff --git a/script/app.js b/script/app.js index be9cd3a..11911fb 100644 --- a/script/app.js +++ b/script/app.js @@ -12,10 +12,7 @@ app.factory('MovieRetriever', function($http, $q, $timeout){ var moreMovies = ["The Wolverine", "The Smurfs 2", "The Mortal Instruments: City of Bones", "Drinking Buddies", "All the Boys Love Mandy Lane", "The Act Of Killing", "Red 2", "Jobs", "Getaway", "Red Obsession", "2 Guns", "The World's End", "Planes", "Paranoia", "The To Do List", "Man of Steel", "The Way Way Back", "Before Midnight", "Only God Forgives", "I Give It a Year", "The Heat", "Pacific Rim", "Pacific Rim", "Kevin Hart: Let Me Explain", "A Hijacking", "Maniac", "After Earth", "The Purge", "Much Ado About Nothing", "Europa Report", "Stuck in Love", "We Steal Secrets: The Story Of Wikileaks", "The Croods", "This Is the End", "The Frozen Ground", "Turbo", "Blackfish", "Frances Ha", "Prince Avalanche", "The Attack", "Grown Ups 2", "White House Down", "Lovelace", "Girl Most Likely", "Parkland", "Passion", "Monsters University", "R.I.P.D.", "Byzantium", "The Conjuring", "The Internship"] - if(i && i.indexOf('T')!=-1) - movies=moreMovies; - else - movies=moreMovies; + movies = moreMovies; $timeout(function(){ moviedata.resolve(movies); diff --git a/script/autocomplete.js b/script/autocomplete.js index 377ad0f..a4cd713 100644 --- a/script/autocomplete.js +++ b/script/autocomplete.js @@ -12,6 +12,7 @@ app.directive('autocomplete', function() { suggestions: '=data', onType: '=onType', onSelect: '=onSelect', + render: '=render', autocompleteRequired: '=' }, controller: ['$scope', function($scope){ @@ -83,10 +84,10 @@ app.directive('autocomplete', function() { // selecting a suggestion with RIGHT ARROW or ENTER $scope.select = function(suggestion){ if(suggestion){ - $scope.searchParam = suggestion; - $scope.searchFilter = suggestion; + $scope.searchParam = suggestion.text; + $scope.searchFilter = suggestion.text; if($scope.onSelect) - $scope.onSelect(suggestion); + $scope.onSelect(suggestion.data); } watching = false; $scope.completing = false; @@ -94,6 +95,30 @@ app.directive('autocomplete', function() { $scope.setIndex(-1); }; + //Every time the suggestions collection changes, it will wrap the elements into the wrappedSuggestions: + $scope.wrappedSuggestions = []; + $scope.$watchCollection('suggestions', function(newSuggestions){ + if(newSuggestions instanceof Array){ + $scope.wrappedSuggestions = newSuggestions.map(function(suggestion, counterIndex){ + var renderedText; + if(typeof $scope.render === 'function'){ + renderedText = $scope.render(suggestion); + } + else if(typeof suggestion !== 'string'){ + console.error('render function must be defined when using data object suggestions'); + renderedText = ''; + } + else{ + renderedText = suggestion; + } + return { + text: renderedText, + data: suggestion, + _id: ''+(counterIndex+1) + }; + }); + } + }); }], link: function(scope, element, attrs){ @@ -214,7 +239,12 @@ app.directive('autocomplete', function() { index = scope.getIndex(); // scope.preSelectOff(); if(index !== -1) { - scope.select(angular.element(angular.element(this).find('li')[index]).text()); + var jLiElement = angular.element(angular.element(this).find('li')[index]); + var suggestionId = jLiElement.attr('data-suggestion-id'); + var suggestion = scope.wrappedSuggestions.filter(function(wrappedSuggestion){ + return suggestionId == wrappedSuggestion._id; + })[0]; + scope.select(suggestion); if(keycode == key.enter) { e.preventDefault(); } @@ -249,32 +279,61 @@ app.directive('autocomplete', function() { class="{{ attrs.inputclass }}"\ id="{{ attrs.inputid }}"\ ng-required="{{ autocompleteRequired }}" />\ -