|
30 | 30 | var matcher = new RegExp(request.term, "i");
|
31 | 31 | response(select.children("option").map(function() {
|
32 | 32 | var text = $(this).text();
|
33 |
| - if (!request.term || matcher.test(text)) |
| 33 | + if (this.value && (!request.term || matcher.test(text))) |
34 | 34 | return {
|
35 |
| - id: $(this).val(), |
| 35 | + id: this.value, |
36 | 36 | label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
|
37 | 37 | value: text
|
38 | 38 | };
|
39 | 39 | }));
|
40 | 40 | },
|
41 | 41 | delay: 0,
|
42 |
| - select: function(e, ui) { |
| 42 | + change: function(event, ui) { |
43 | 43 | if (!ui.item) {
|
44 | 44 | // remove invalid value, as it didn't match anything
|
45 | 45 | $(this).val("");
|
46 | 46 | return false;
|
47 | 47 | }
|
48 |
| - $(this).focus(); |
49 | 48 | select.val(ui.item.id);
|
50 |
| - self._trigger("selected", null, { |
| 49 | + self._trigger("selected", event, { |
51 | 50 | item: select.find("[value='" + ui.item.id + "']")
|
52 | 51 | });
|
53 | 52 |
|
|
56 | 55 | })
|
57 | 56 | .addClass("ui-widget ui-widget-content ui-corner-left");
|
58 | 57 | $("<button> </button>")
|
| 58 | + .attr("tabIndex", -1) |
59 | 59 | .attr("title", "Show All Items")
|
60 | 60 | .insertAfter(input)
|
61 | 61 | .button({
|
|
81 | 81 | })(jQuery);
|
82 | 82 |
|
83 | 83 | $(function() {
|
84 |
| - $("select").combobox(); |
| 84 | + $("#combobox").combobox(); |
| 85 | + $("#toggle").click(function() { |
| 86 | + $("#combobox").toggle(); |
| 87 | + }); |
85 | 88 | });
|
86 | 89 | </script>
|
87 | 90 | </head>
|
|
91 | 94 |
|
92 | 95 | <div class="ui-widget">
|
93 | 96 | <label>Your preferred programming language: </label>
|
94 |
| - <select> |
| 97 | + <select id="combobox"> |
| 98 | + <option value="">Select one...</option> |
95 | 99 | <option value="a">asp</option>
|
96 | 100 | <option value="c">c</option>
|
97 | 101 | <option value="cpp">c++</option>
|
|
107 | 111 | <option value="s">scala</option>
|
108 | 112 | </select>
|
109 | 113 | </div>
|
| 114 | +<button id="toggle">Show underlying select</button> |
110 | 115 |
|
111 | 116 | </div><!-- End demo -->
|
112 | 117 |
|
|
0 commit comments