jquery / jquery-ui

Source
Commits
Network (38)
Graphs
Tree: ffc29bb

The official jQuery user interface library. — Read more

This URL has Read+Write access

Autocomplete: Combobox demo update, fixed mustMatch with corrected change 
event, also added button for toggling the hidden select and an empty-value 
option. Fixes #5453

jzaefferer (author)

Thu Apr 08 03:07:45 -0700 2010

commit ffc29bba052e4bc8b84e4c2e16036140148b6f9c
tree 9e8ea3844386b841b10c521ff3fe5ab0c4c1e43b
parent c01b3baef97808a3a7dfafaea084c03a27e92564

demos/autocomplete/combobox.html

19 ••••

demos/autocomplete/combobox.html

View file @ ffc29bb

@@ -30,24 +30,23 @@
               var matcher = new RegExp(request.term, "i");
               response(select.children("option").map(function() {
                 var text = $(this).text();
-                if (!request.term || matcher.test(text))
+                if (this.value && (!request.term || matcher.test(text)))
                   return {
-                    id: $(this).val(),
+                    id: this.value,
                     label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                     value: text
                   };
               }));
             },
             delay: 0,
-            select: function(e, ui) {
+            change: function(event, ui) {
               if (!ui.item) {
                 // remove invalid value, as it didn't match anything
                 $(this).val("");
                 return false;
               }
-              $(this).focus();
               select.val(ui.item.id);
-              self._trigger("selected", null, {
+              self._trigger("selected", event, {
                 item: select.find("[value='" + ui.item.id + "']")
               });
               
@@ -56,6 +55,7 @@
           })
           .addClass("ui-widget ui-widget-content ui-corner-left");
         $("<button>&nbsp;</button>")
+        .attr("tabIndex", -1)
         .attr("title", "Show All Items")
         .insertAfter(input)
         .button({
@@ -81,7 +81,10 @@
   })(jQuery);
     
   $(function() {
-    $("select").combobox();
+    $("#combobox").combobox();
+    $("#toggle").click(function() {
+      $("#combobox").toggle();
+    });
   });
   </script>
 </head>
@@ -91,7 +94,8 @@
 
 <div class="ui-widget">
   <label>Your preferred programming language: </label>
-  <select>
+  <select id="combobox">
+    <option value="">Select one...</option>
     <option value="a">asp</option>
         <option value="c">c</option>
         <option value="cpp">c++</option>
@@ -107,6 +111,7 @@
         <option value="s">scala</option>
   </select>
 </div>
+<button id="toggle">Show underlying select</button>
 
 </div><!-- End demo -->
 

0 notes on commit `ffc29bb` Show line notes below

Please log in to comment.

...	...	@@ -30,24 +30,23 @@
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,6 +55,7 @@
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,7 +81,10 @@
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,7 +94,8 @@
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,6 +111,7 @@
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

jquery / jquery-ui

0 notes on commit ffc29bb Show line notes below

0 notes on commit `ffc29bb` Show line notes below