Daniel@0
|
1 (function($) {
|
Daniel@0
|
2 $.widget( "custom.combobox", {
|
Daniel@0
|
3 _create : function() {
|
Daniel@0
|
4 this.wrapper = $("<span>").addClass(
|
Daniel@0
|
5 "custom-combobox")
|
Daniel@0
|
6 .insertAfter(this.element);
|
Daniel@0
|
7 this.element.hide();
|
Daniel@0
|
8 this._createAutocomplete();
|
Daniel@0
|
9 this._createShowAllButton();
|
Daniel@0
|
10 },
|
Daniel@0
|
11
|
Daniel@0
|
12 _createAutocomplete : function() {
|
Daniel@0
|
13 var selected = this.element.children(":selected"), value = selected
|
Daniel@0
|
14 .val() ? selected.text() : "";
|
Daniel@0
|
15 this.input = $("<input>")
|
Daniel@0
|
16 .appendTo(this.wrapper)
|
Daniel@0
|
17 .val(value)
|
Daniel@0
|
18 .attr("title", "")
|
Daniel@0
|
19 .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
|
Daniel@0
|
20 .autocomplete({
|
Daniel@0
|
21 delay : 0,
|
Daniel@0
|
22 minLength : 0,
|
Daniel@0
|
23 source : $.proxy(this, "_source")
|
Daniel@0
|
24 });
|
Daniel@0
|
25 this._on(this.input, {
|
Daniel@0
|
26 autocompleteselect : function(event, ui) {
|
Daniel@0
|
27 ui.item.option.selected = true;
|
Daniel@0
|
28 this._trigger("select", event, {
|
Daniel@0
|
29 item : ui.item.option
|
Daniel@0
|
30 });
|
Daniel@0
|
31 },
|
Daniel@0
|
32 autocompletechange : "_applyChange"
|
Daniel@0
|
33 });
|
Daniel@0
|
34 },
|
Daniel@0
|
35
|
Daniel@0
|
36 _createShowAllButton : function() {
|
Daniel@0
|
37 var input = this.input, wasOpen = false;
|
Daniel@0
|
38 $("<a>").attr("tabIndex", -1).attr("title",
|
Daniel@0
|
39 "Show All Items").tooltip().appendTo(
|
Daniel@0
|
40 this.wrapper).button({
|
Daniel@0
|
41 icons : {
|
Daniel@0
|
42 primary : "ui-icon-triangle-1-s"
|
Daniel@0
|
43 },
|
Daniel@0
|
44 text : false
|
Daniel@0
|
45 }).removeClass("ui-corner-all").addClass(
|
Daniel@0
|
46 "custom-combobox-toggle ui-corner-right")
|
Daniel@0
|
47 .mousedown(
|
Daniel@0
|
48 function() {
|
Daniel@0
|
49 wasOpen = input.autocomplete(
|
Daniel@0
|
50 "widget")
|
Daniel@0
|
51 .is(":visible");
|
Daniel@0
|
52 }).click(function() {
|
Daniel@0
|
53 input.focus();
|
Daniel@0
|
54 // Close if already visible
|
Daniel@0
|
55 if (wasOpen) {
|
Daniel@0
|
56 return;
|
Daniel@0
|
57 }
|
Daniel@0
|
58 // Pass empty string as value to search
|
Daniel@0
|
59 // for, displaying all results
|
Daniel@0
|
60 input.autocomplete("search", "");
|
Daniel@0
|
61 });
|
Daniel@0
|
62 },
|
Daniel@0
|
63 _source : function(request, response) {
|
Daniel@0
|
64 var matcher = new RegExp($.ui.autocomplete
|
Daniel@0
|
65 .escapeRegex(request.term), "i");
|
Daniel@0
|
66 response(this.element.children("option").map(
|
Daniel@0
|
67 function() {
|
Daniel@0
|
68 var text = $(this).text();
|
Daniel@0
|
69 if (this.value
|
Daniel@0
|
70 && (!request.term || matcher
|
Daniel@0
|
71 .test(text)))
|
Daniel@0
|
72 return {
|
Daniel@0
|
73 label : text,
|
Daniel@0
|
74 value : text,
|
Daniel@0
|
75 option : this
|
Daniel@0
|
76 };
|
Daniel@0
|
77 }));
|
Daniel@0
|
78 },
|
Daniel@0
|
79
|
Daniel@0
|
80 _applyChange : function(event, ui) {
|
Daniel@0
|
81 // Selected an item, nothing to do
|
Daniel@0
|
82 if (ui.item) {
|
Daniel@0
|
83 return;
|
Daniel@0
|
84 }
|
Daniel@0
|
85 // Search for a match (case-insensitive)
|
Daniel@0
|
86 var value = this.input.val(), valueLowerCase = value
|
Daniel@0
|
87 .toLowerCase(), valid = false;
|
Daniel@0
|
88 this.element
|
Daniel@0
|
89 .children("option")
|
Daniel@0
|
90 .each(
|
Daniel@0
|
91 function() {
|
Daniel@0
|
92 if ($(this).text()
|
Daniel@0
|
93 .toLowerCase() === valueLowerCase) {
|
Daniel@0
|
94 this.selected = valid = true;
|
Daniel@0
|
95 return false;
|
Daniel@0
|
96 }
|
Daniel@0
|
97 });
|
Daniel@0
|
98 // Found a match, nothing to do
|
Daniel@0
|
99 this.element.val(value);
|
Daniel@0
|
100 if (valid) {
|
Daniel@0
|
101 return;
|
Daniel@0
|
102 }
|
Daniel@0
|
103 },
|
Daniel@0
|
104 _destroy : function() {
|
Daniel@0
|
105 this.wrapper.remove();
|
Daniel@0
|
106 this.element.show();
|
Daniel@0
|
107 }
|
Daniel@0
|
108 });
|
Daniel@0
|
109 })(jQuery); |