use autocomplete in filter form

pandora/config.pandora.jsonc

@@ -594,6 +594,7 @@ examples (config.SITENAME.jsonc) that are part of this pan.do/ra distribution.
             "id": "keywords",
             "title": "Keywords",
             "type": "layer",
+            "autocomplete": true,
             "filter": true,
             "find": true
         },

pandora/edit/views.py

@@ -118,6 +118,12 @@ def editClip(request, data):
                     clip.item = clip.annotation.item
                     clip.annotation = None
                 setattr(clip, {'in': 'start', 'out': 'end'}.get(key), float(data[key]))
+        if 'annotation' in data and not data['annotation']:
+            if clip.annotation:
+                clip.start = clip.annotation.start
+                clip.end = clip.annotation.end
+                clip.item = clip.annotation.item
+                clip.annotation = None
         if 'volume' in data:
             clip.volume = float(data['volume'])
         if not clip.annotation:

static/js/filterForm.js

@@ -29,6 +29,7 @@ pandora.ui.filterForm = function(options) {
                     if (key.format && key.format.type == 'ColorPercent') {
                         key.format.type = 'percent';
                     }
+                    key.autocomplete = autocompleteFunction(key)
                     return key;
                 }).concat([{
                     id: 'list',
@@ -70,6 +71,24 @@ pandora.ui.filterForm = function(options) {
         that.getList = that.$filter.getList;
         that.value = that.$filter.value;
     });
+    function autocompleteFunction(key) {
+        return key.autocomplete ? function(value, callback) {
+            pandora.api.autocomplete({
+                key: key.id,
+                query: {
+                    conditions: [],
+                    operator: '&'
+                },
+                range: [0, 100],
+                sort: key.autocompleteSort,
+                value: value
+            }, function(result) {
+                callback(result.data.items.map(function(item) {
+                    return Ox.decodeHTMLEntities(item);
+                }));
+            });
+        } : null;
+    }
     that.updateResults = function() {
         if (mode == 'list') {
             Ox.Request.clearCache(list.id);