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