replace selectize select with an autocomplete widget

Talengi · Jan 29, 2016 · 78c98a7 · 78c98a7
1 parent 8001122
commit 78c98a7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/src/restapi/static/js/autocomplete.js b/src/restapi/static/js/autocomplete.js
@@ -16,7 +16,6 @@ jQuery(function($) {
             labelField: labelField,
             searchField: searchFields,
             mode: mode,
-            dataAttr: 'data-data',
             create: false,
             options: [],
             load: function(query, callback) {

diff --git a/src/static/js/reviews/views.js b/src/static/js/reviews/views.js
@@ -100,36 +100,48 @@ var Phase = Phase || {};
         el: '#pick-distrib-list-field',
         initialize: function() {
             _.bindAll(this, 'selectList');
+
+            this.collection = new Phase.Collections.DistributionListCollection(
+                null, {
+                apiUrl: this.apiUrl});
+
             this.apiUrl = this.$el.data('api-url');
             this.select = this.$el.find('select');
+
+            var that = this;
             this.select.selectize({
+                plugins: {
+                    'no_results': {message: 'No corresponding list was found.'}
+                },
                 valueField: 'id',
-                labelField: 'name'
+                labelField: 'name',
+                searchField: 'name',
+                mode: 'single',
+                create: false,
+                preload: true,
+                onOptionAdd: function(value, data) {
+                    that.collection.add(data);
+                },
+                load: function(query, callback) {
+                    $.ajax({
+                        url: that.apiUrl,
+                        type: 'GET',
+                        dataType: 'json',
+                        data: {
+                            q: query,
+                            page_limit: 10,
+                        },
+                        error: function() {
+                            callback();
+                        },
+                        success: function(res) {
+                            callback(res.results);
+                        }
+                    });
+                }
             });
             this.selectize = this.select[0].selectize;
             this.selectize.on('item_add', this.selectList);
-
-            this.collection = new Phase.Collections.DistributionListCollection(
-                null, {
-                apiUrl: this.apiUrl});
-            this.listenTo(this.collection, 'add', this.addOption);
-            this.listenTo(this.collection, 'sync', this.checkAvailableLists);
-            this.collection.fetch();
-        },
-        checkAvailableLists: function() {
-            if (this.collection.length === 0) {
-                this.selectize.addOption({
-                    id: -1,
-                    name: 'No lists are available for this category.'
-                });
-            }
-        },
-        addOption: function(distributionList) {
-            this.selectize.addOption({
-                id: distributionList.get('id'),
-                name: distributionList.get('name'),
-                data: distributionList
-            });
         },
         selectList: function(value) {
             if (value >= 0) {