jquery / jquery-ui

Source
Commits
Network (211)
Graphs
Tree: ba09165

The official jQuery user interface library. — Read more

This URL has Read+Write access

Autcomplete: Refactored combobox demo.

scottgonzalez (author)

Tue Jul 20 11:20:46 -0700 2010

commit ba091650ffdd2e359624
tree 884d1d6660b70c339517
parent c2c09e89538ce071efba

demos/autocomplete/combobox.html

110 ••••

demos/autocomplete/combobox.html

View file @ ba09165

          
@@ -18,75 +18,85 @@

     .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }

   </style>

   <script type="text/javascript">

-  (function($) {

-    $.widget("ui.combobox", {

+  (function( $ ) {

+    $.widget( "ui.combobox", {

       _create: function() {

         var self = this;

         var select = this.element.hide();

-        var input = $("<input>")

-          .insertAfter(select)

+        var input = $( "<input>" )

+          .insertAfter( select )

           .autocomplete({

-            source: function(request, response) {

-              var matcher = new RegExp(request.term, "i");

-              response(select.children("option").map(function() {

-                var text = $(this).text();

-                if (this.value && (!request.term || matcher.test(text)))

+            delay: 0,

+            minLength: 0,

+            source: function( request, response ) {

+              var matcher = new RegExp( request.term, "i" );

+              response( select.children( "option" ).map(function() {

+                var text = $( this ).text();

+                if ( this.value && ( !request.term || matcher.test(text) ) )

                   return {

-                    id: this.value,

-                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),

-                    value: text

+                    label: text.replace(

+                      new RegExp(

+                        "(?![^&;]+;)(?!<[^<>]*)(" +

+                        $.ui.autocomplete.escapeRegex(request.term) +

+                        ")(?![^<>]*>)(?![^&;]+;)", "gi"

+                      ), "<strong>$1</strong>" ),

+                    value: text,

+                    option: this

                   };

-              }));

+              }) );

             },

-            delay: 0,

-            change: function(event, ui) {

-              if (!ui.item) {

+            select: function( event, ui ) {

+              ui.item.option.selected = true;

+              //select.val( ui.item.option.value );

+              self._trigger( "selected", event, {

+                item: ui.item.option

+              });

+            },

+            change: function( event, ui ) {

+              if ( !ui.item ) {

                 // remove invalid value, as it didn't match anything

-                $(this).val("");

-                select.val("");

+                $( this ).val( "" );

+                select.val( "" );

                 return false;

               }

-              select.val(ui.item.id);

-              self._trigger("selected", event, {

-                item: select.find("[value='" + ui.item.id + "']")

-              });

-              

-            },

-            minLength: 0

+            }

           })

-          .addClass("ui-widget ui-widget-content ui-corner-left");

-        input.data("autocomplete")._renderItem = function( ul, item) {

+          .addClass( "ui-widget ui-widget-content ui-corner-left" );

+

+        input.data( "autocomplete" )._renderItem = function( ul, item ) {

           return $( "<li></li>" )

             .data( "item.autocomplete", item )

             .append( "<a>" + item.label + "</a>" )

             .appendTo( ul );

         };

-        $("<button>&nbsp;</button>")

-        .attr("tabIndex", -1)

-        .attr("title", "Show All Items")

-        .insertAfter(input)

-        .button({

-          icons: {

-            primary: "ui-icon-triangle-1-s"

-          },

-          text: false

-        }).removeClass("ui-corner-all")

-        .addClass("ui-corner-right ui-button-icon")

-        .click(function() {

-          // close if already visible

-          if (input.autocomplete("widget").is(":visible")) {

-            input.autocomplete("close");

-            return;

-          }

-          // pass empty string as value to search for, displaying all results

-          input.autocomplete("search", "");

-          input.focus();

-        });

+

+        $( "<button>&nbsp;</button>" )

+          .attr( "tabIndex", -1 )

+          .attr( "title", "Show All Items" )

+          .insertAfter( input )

+          .button({

+            icons: {

+              primary: "ui-icon-triangle-1-s"

+            },

+            text: false

+          })

+          .removeClass( "ui-corner-all" )

+          .addClass( "ui-corner-right ui-button-icon" )

+          .click(function() {

+            // close if already visible

+            if ( input.autocomplete( "widget" ).is( ":visible" ) ) {

+              input.autocomplete( "close" );

+              return;

+            }

+

+            // pass empty string as value to search for, displaying all results

+            input.autocomplete( "search", "" );

+            input.focus();

+          });

       }

     });

-

   })(jQuery);

-    

+

   $(function() {

     $("#combobox").combobox();

     $("#toggle").click(function() {

0 notes on commit `ba09165` Show line notes below

Please log in to comment.

...	...	@@ -18,75 +18,85 @@
18	18	.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
19	19	</style>
20	20	<script type="text/javascript">
21		- (function($) {
22		- $.widget("ui.combobox", {
	21	+ (function( $ ) {
	22	+ $.widget( "ui.combobox", {
23	23	_create: function() {
24	24	var self = this;
25	25	var select = this.element.hide();
26		- var input = $("<input>")
27		- .insertAfter(select)
	26	+ var input = $( "<input>" )
	27	+ .insertAfter( select )
28	28	.autocomplete({
29		- source: function(request, response) {
30		- var matcher = new RegExp(request.term, "i");
31		- response(select.children("option").map(function() {
32		- var text = $(this).text();
33		- if (this.value && (!request.term \|\| matcher.test(text)))
	29	+ delay: 0,
	30	+ minLength: 0,
	31	+ source: function( request, response ) {
	32	+ var matcher = new RegExp( request.term, "i" );
	33	+ response( select.children( "option" ).map(function() {
	34	+ var text = $( this ).text();
	35	+ if ( this.value && ( !request.term \|\| matcher.test(text) ) )
34	36	return {
35		- id: this.value,
36		- label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>])(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
37		- value: text
	37	+ label: text.replace(
	38	+ new RegExp(
	39	+ "(?![^&;]+;)(?!<[^<>]*)(" +
	40	+ $.ui.autocomplete.escapeRegex(request.term) +
	41	+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
	42	+ ), "<strong>$1</strong>" ),
	43	+ value: text,
	44	+ option: this
38	45	};
39		- }));
	46	+ }) );
40	47	},
41		- delay: 0,
42		- change: function(event, ui) {
43		- if (!ui.item) {
	48	+ select: function( event, ui ) {
	49	+ ui.item.option.selected = true;
	50	+ //select.val( ui.item.option.value );
	51	+ self._trigger( "selected", event, {
	52	+ item: ui.item.option
	53	+ });
	54	+ },
	55	+ change: function( event, ui ) {
	56	+ if ( !ui.item ) {
44	57	// remove invalid value, as it didn't match anything
45		- $(this).val("");
46		- select.val("");
	58	+ $( this ).val( "" );
	59	+ select.val( "" );
47	60	return false;
48	61	}
49		- select.val(ui.item.id);
50		- self._trigger("selected", event, {
51		- item: select.find("[value='" + ui.item.id + "']")
52		- });
53		-
54		- },
55		- minLength: 0
	62	+ }
56	63	})
57		- .addClass("ui-widget ui-widget-content ui-corner-left");
58		- input.data("autocomplete")._renderItem = function( ul, item) {
	64	+ .addClass( "ui-widget ui-widget-content ui-corner-left" );
	65	+
	66	+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
59	67	return $( "<li></li>" )
60	68	.data( "item.autocomplete", item )
61	69	.append( "<a>" + item.label + "</a>" )
62	70	.appendTo( ul );
63	71	};
64		- $("<button> </button>")
65		- .attr("tabIndex", -1)
66		- .attr("title", "Show All Items")
67		- .insertAfter(input)
68		- .button({
69		- icons: {
70		- primary: "ui-icon-triangle-1-s"
71		- },
72		- text: false
73		- }).removeClass("ui-corner-all")
74		- .addClass("ui-corner-right ui-button-icon")
75		- .click(function() {
76		- // close if already visible
77		- if (input.autocomplete("widget").is(":visible")) {
78		- input.autocomplete("close");
79		- return;
80		- }
81		- // pass empty string as value to search for, displaying all results
82		- input.autocomplete("search", "");
83		- input.focus();
84		- });
	72	+
	73	+ $( "<button> </button>" )
	74	+ .attr( "tabIndex", -1 )
	75	+ .attr( "title", "Show All Items" )
	76	+ .insertAfter( input )
	77	+ .button({
	78	+ icons: {
	79	+ primary: "ui-icon-triangle-1-s"
	80	+ },
	81	+ text: false
	82	+ })
	83	+ .removeClass( "ui-corner-all" )
	84	+ .addClass( "ui-corner-right ui-button-icon" )
	85	+ .click(function() {
	86	+ // close if already visible
	87	+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
	88	+ input.autocomplete( "close" );
	89	+ return;
	90	+ }
	91	+
	92	+ // pass empty string as value to search for, displaying all results
	93	+ input.autocomplete( "search", "" );
	94	+ input.focus();
	95	+ });
85	96	}
86	97	});
87		-
88	98	})(jQuery);
89		-
	99	+
90	100	$(function() {
91	101	$("#combobox").combobox();
92	102	$("#toggle").click(function() {

jquery / jquery-ui

0 notes on commit ba09165 Show line notes below

Your current locale selection: English. Choose another?

0 notes on commit `ba09165` Show line notes below