https://festivall.com.tr/kurumlar_complate/js/jquery.autocomplete.multiselect.js

1// http://jsfiddle.net/mekwall/sgxKJ/
2
3$.widget("ui.autocomplete", $.ui.autocomplete, {
4    options : $.extend({}, this.options, {
5        multiselect: false
6    }),
7    _create: function(){
8        this._super();
9
10        var self = this,
11            o = self.options;
12
13        if (o.multiselect) {
14            console.log('multiselect true');
15
16            self.selectedItems = {};           
17            self.multiselect = $("<div></div>")
18                .addClass("ui-autocomplete-multiselect ui-state-default ui-widget")
19                .css("width", self.element.width())
20                .insertBefore(self.element)
21                .append(self.element)
22                .bind("click.autocomplete", function(){
23                    self.element.focus();
24                });
25            
26            var fontSize = parseInt(self.element.css("fontSize"), 10);
27            function autoSize(e){
28                // Hackish autosizing
29                var $this = $(this);
30                $this.width(1).width(this.scrollWidth+fontSize-1);
31            };
32
33            var kc = $.ui.keyCode;
34            self.element.bind({
35                "keydown.autocomplete": function(e){
36                    if ((this.value === "") && (e.keyCode == kc.BACKSPACE)) {
37                        var prev = self.element.prev();
38                        delete self.selectedItems[prev.text()];
39                        prev.remove();
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.label)
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.label] = 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});