https://app.schmetterling-argus.de/js/custom/jquery.autocomplete.multiselect.js

1
2$.widget("ui.autocomplete", $.ui.autocomplete, {
3    options : $.extend({}, this.options, {
4        multiselect: false
5    }),
6    _create: function(){
7        this._super();
8
9        var self = this,
10            o = self.options;
11
12        if (o.multiselect) {
13            self.selectedItems = {};           
14            self.multiselect = $("<div></div>")
15                .addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
16                .css("width", self.element.width())
17                .insertBefore(self.element)
18                .append(self.element)
19                .bind("click.autocomplete", function(){
20                    self.element.focus();
21                });
22            
23            var fontSize = parseInt(self.element.css("fontSize"), 10);
24            function autoSize(e){
25                // Hackish autosizing
26                var $this = $(this);
27                $this.width(1).width(this.scrollWidth+fontSize-1+20);                
28            };
29
30            var kc = $.ui.keyCode;
31            self.element.bind({
32                "keydown.autocomplete": function(e){
33                    if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
34                        var prev = self.element.prev();
35                        delete self.selectedItems[prev.text()];
36                        prev.remove();
37                    }                    
38                    if (e.keyCode == kc.TAB) {
39                        return false;
40                    }
41                },
42                // TODO: Implement outline of container
43                "focus.autocomplete blur.autocomplete": function(){
44                    self.multiselect.toggleClass("ui-state-active");
45                },
46                "keypress.autocomplete change.autocomplete focus.autocomplete blur.autocomplete": autoSize
47            }).trigger("change");
48
49            // TODO: There's a better way?
50            o.select = o.select || function(e, ui) {
51                $("<div></div>")
52                    .addClass("ui-autocomplete-multiselect-item")
53                    .text(ui.item.value)
54                    .append(
55                        $("<span></span>")
56                            .addClass("ui-icon ui-icon-close")
57                            .click(function(){
58                                var item = $(this).parent();
59                                delete self.selectedItems[item.text()];
60                                item.remove();
61                            })
62                    )
63                    .insertBefore(self.element);
64                
65                self.selectedItems[ui.item.value] = ui.item;
66                self._value("");
67                return false;
68            }
69
70            /*self.options.open = function(e, ui) {
71                var pos = self.multiselect.position();
72                pos.top += self.multiselect.height();
73                self.menu.element.position(pos);
74            }*/
75        }
76
77        return this;
78    }
79});