FilesExpand file tree

master

/

angular-typeahead.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

163 lines (141 loc) · 5.44 KB

master

/

angular-typeahead.js

Copy path

Top

File metadata and controls

• Code
• Blame

163 lines (141 loc) · 5.44 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

"use strict";

angular.module('siyfion.sfTypeahead', [])

// Inject the typeahead jquery plugin through angular to make it easier to unit

// test the library.

// Usage:

// instead of `$element.typeahead(foo, bar)`

// do `$typeahead($element, foo, bar)`

.value('$typeahead', function(subject) {

subject.typeahead.apply(subject, Array.prototype.slice.call(arguments, 1));

})

// The actual directive

.directive('sfTypeahead', ['$typeahead', function ($typeahead) {

return {

restrict: 'AC', // Only apply on an attribute or class

require: 'ngModel', // The two-way data bound value that is returned by the directive

scope: {

datasets: '=',

options: '=',

allowCustom: '=' // We cannot use '<' if we want to support angular 1.2.x

},

link: function(scope, element, attrs, ngModel) {

var initialized = false;

var options;

var datasets;

// Unsubscribe handle for the scope watcher

var unsubscribe = null;

// Remembers whether the `datasets` parameter provided was an array or an object.

var datasetsIsArray;

// Create the typeahead on the element

initialize();

// Watch for changes on datasets

watchDatasets();

// Parses and validates what is going to be set to model (called when: ngModel.$setViewValue(value))

ngModel.$parsers.push(function(fromView) {

// In Firefox, when the typeahead field loses focus, it fires an extra

// angular input update event. This causes the stored model to be

// replaced with the search string. If the typeahead search string

// hasn't changed at all (the 'val' property doesn't update until

// after the event loop finishes), then we can bail out early and keep

// the current model value.

if (angular.isObject(ngModel.$modelValue) && fromView === getDatumValue(ngModel.$modelValue)) {

return ngModel.$modelValue;

}

if (!isCustomAllowed() && typeof fromView === 'string') {

return ngModel.$modelValue;

}

return fromView;

});

// Formats what is going to be displayed (called when: $scope.model = { object })

ngModel.$formatters.push(function(fromModel) {

if (angular.isObject(fromModel)) {

fromModel = getDatumValue(fromModel);

}

if (!fromModel) {

$typeahead(element, 'val', '');

} else {

$typeahead(element, 'val', fromModel);

}

return fromModel;

});

function watchDatasets() {

unsubscribe = datasetsIsArray ?

scope.$watchCollection('datasets', datasetsChangeHandler) :

scope.$watch('datasets', datasetsChangeHandler);

}

function datasetsChangeHandler(newValue, oldValue) {

if (angular.equals(newValue, oldValue)) {

return;

}

var oldDatasetsIsArray = datasetsIsArray;

initialize();

if (datasetsIsArray !== oldDatasetsIsArray) {

unsubscribe();

watchDatasets();

}

}

function initialize() {

if (scope.datasets == null) {

throw new Error('The datasets parameter is mandatory!');

}

options = scope.options || {};

datasetsIsArray = angular.isArray(scope.datasets);

datasets = datasetsIsArray ? scope.datasets : [scope.datasets];

if (!initialized) {

$typeahead(element, options, datasets);

scope.$watch('options', initialize);

initialized = true;

} else {

var hasFocus = element[0] === document.activeElement;

$typeahead(element, 'destroy');

$typeahead(element, options, datasets);

if (hasFocus) {

element[0].focus();

}

}

}

// Returns the string to be displayed given some datum

function getDatumValue(datum) {

for (var i in datasets) {

var dataset = datasets[i];

var displayKey = dataset.displayKey || 'value';

var value = (angular.isFunction(displayKey) ? displayKey(datum) : datum[displayKey]) || '';

return value;

}

}

function isCustomAllowed() {

return scope.allowCustom === undefined || !!scope.allowCustom;

}

function updateScope (suggestion) {

scope.$apply(function () {

ngModel.$setViewValue(suggestion);

});

}

function forwardEvent(name) {

element.bind(name, function() {

scope.$emit(name, Array.prototype.slice. call(arguments, 1));

});

}

// Update the value binding when a value is manually selected from the dropdown.

element.bind('typeahead:select', function(evt, suggestion, dataset) {

updateScope(suggestion);

scope.$emit('typeahead:select', suggestion, dataset);

});

// Update the value binding when a query is autocompleted.

element.bind('typeahead:autocomplete', function(evt, suggestion, dataset) {

updateScope(suggestion);

scope.$emit('typeahead:autocomplete', suggestion, dataset);

});

forwardEvent('typeahead:active');

forwardEvent('typeahead:idle');

forwardEvent('typeahead:open');

forwardEvent('typeahead:close');

forwardEvent('typeahead:change');

forwardEvent('typeahead:render');

forwardEvent('typeahead:cursorchange');

forwardEvent('typeahead:asyncrequest');

forwardEvent('typeahead:asynccancel');

forwardEvent('typeahead:asyncreceive');

}

};

}]);