Add the jQuery UI Autocomplete wrapper #414

Closed
wants to merge 3 commits into from

2 participants

@mirontoli

Hi! I have seen many implementations of jQuery UI Autocomplete in angular UI, but there are no complete implementations. Here is the code for the autocomplete which can use all the options you can pass into a jQuery UI autocomplete. See my blog post for details: angular jQuery UI autocomplete

@ProLoser ProLoser and 1 other commented on an outdated diff Feb 15, 2013
modules/directives/autocomplete/autocomplete.js
@@ -0,0 +1,31 @@
+/*global angular */
+/*
+ jQuery UI Autocomplete plugin wrapper
+ @author Anatoly Mironov
+ http://sharepointkunskap.wordpress.com, http://www.bool.se
+
+ @param [ui-autocomplete] {object} Options to pass to $.fn.autocomplete()
+ */
+
+angular.module('ui.directives')
+
+.directive('uiAutocomplete', [function() {
@ProLoser
AngularUI member

Can you add support for uiConfig?

Sure, I'll try to find out how to do it, and will do it. Could you provide a link where uiConfig is explained?

@ProLoser
AngularUI member

Poke around some other directives and see how we did it. For example uiJq, uiSelect2, uiDate, etc. It's fairly simple.

Now I understand the purpose of uiConfig It is really awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@ProLoser ProLoser and 1 other commented on an outdated diff Feb 15, 2013
modules/directives/autocomplete/autocomplete.js
+.directive('uiAutocomplete', [function() {
+ var directive = {
+ require: '?ngModel',
+ link: function(scope, element, attrs, controller) {
+ var getOptions = function() {
+ return angular.extend({}, scope.$eval(attrs.uiAutocomplete));
+ };
+ var initAutocompleteWidget = function () {
+ var opts = getOptions();
+ element.autocomplete(opts);
+ if (opts._renderItem) {
+ element.data("autocomplete")._renderItem = opts._renderItem;
+ }
+ };
+ // Watch for changes to the directives options
+ scope.$watch(getOptions, initAutocompleteWidget, true);
@ProLoser
AngularUI member

This is evaluating the options every single $apply() which is very inefficient.

Instead, I would just initialize the plugin normally once and then do something like:

scope.$watch(attrs.uiAutocomplete, function(newVal, oldVal){
  element.autocomplete('options', newVal);
}, true);

Great comment. I aggree. This is a little bit inefficient. I'll change..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@ProLoser ProLoser and 1 other commented on an outdated diff Feb 15, 2013
modules/directives/autocomplete/autocomplete.js
+ */
+
+angular.module('ui.directives')
+
+.directive('uiAutocomplete', [function() {
+ var directive = {
+ require: '?ngModel',
+ link: function(scope, element, attrs, controller) {
+ var getOptions = function() {
+ return angular.extend({}, scope.$eval(attrs.uiAutocomplete));
+ };
+ var initAutocompleteWidget = function () {
+ var opts = getOptions();
+ element.autocomplete(opts);
+ if (opts._renderItem) {
+ element.data("autocomplete")._renderItem = opts._renderItem;
@ProLoser
AngularUI member

What is the purpose of _renderItem?

_renderItem is a "private" scoped function in jQuery UI autocomplete which defines how an item has to be rendered. Otherwise a plain list is rendered. I wrote about it in my blog post. Previously formatItem was an option in autocomplete, but no longer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
mirontoli added some commits Feb 23, 2013
@mirontoli mirontoli Adjust autocomplete according the descussion for PR #414
1. run scope.$watch only if the uiAutocomplete attribute changes
2. Support uiConfig
24b472d
@mirontoli mirontoli Add initial tests for uiAutocomplete
Include them into the Pull Request #414
780f60b
@ProLoser ProLoser closed this Sep 9, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment