Existing select box Starting with the following select box: Aachener Straße Abbestraße Adalbertstraße Adam-von-Trott-Straße Adenauerplatz Admiralstraße Agathe-Lasch-Platz Ahornallee Ahrensfelder Chaussee Ahrenshooper Straße Ahrweilerstraße Akazienallee Albrecht-Achilles-Straße Alemannenallee Alexandrinenstraße Alfred-Döblin-Platz Allendorfer Weg Alte Allee Alte Brauerei Alte Jakobstraße Altenburger Allee Altenhofer Straße Alt-Lietzow Alt-Stralau Am Bahnhof Grunewald Am Bahnhof Jungfernheide Am Bahnhof Westend Am Berl Am Breiten Luch Am Comeniusplatz Am Containerbahnhof Am Dörferweg Am Dornbusch Am Faulen See Am Fliederbusch Am Glockenturm Am Güterbahnhof Halensee Am Gutshof Am Hain Am Heidebusch Am Johannistisch Am Oberbaum Am Ostbahnhof Am Postbahnhof Am Postfenn Am Postfenn Am Rudolfplatz Am Rupenhorn Am Schillertheater Am Speicher Am Spreebord Am Tempelhofer Berg Am Vogelherd Am Volkspark Am Weinhang Am Westkreuz Am Wriezener Bahnhof Amselstraße Amtsgerichtsplatz An der Barthschen Promenade An der Brauerei An der Fließwiese An der Margaretenhöhe An der Michaelbrücke An der Ostbahn An der Schillingbrücke Andreasplatz Andreasstraße Angerburger Allee Anhalter Straße Anna-Ebermann-Straße Annemariestraße Arcostraße Arendsweg Arndtstraße Arnimstraße Arysallee Aschaffenburger Straße Askanischer Platz Aßmannshauser Straße Astridstraße Auerbacher Straße Auerstraße Augsburger Straße Augsburger Straße Augustastraße Auguste-Viktoria-Straße Avus Avus Axel-Springer-Straße Babelsberger Straße Badenallee Badensche Straße Baerwaldstraße Bahnhofstraße Bahrfeldtstraße Ballenstedter Straße Bamberger Straße Bänschstraße Barbarossastraße The simplest way to upgrade this to a dropdown widget is: Aachener Straße Abbestraße Adalbertstraße Adam-von-Trott-Straße Adenauerplatz Admiralstraße Agathe-Lasch-Platz Ahornallee Ahrensfelder Chaussee Ahrenshooper Straße Ahrweilerstraße Akazienallee Albrecht-Achilles-Straße Alemannenallee Alexandrinenstraße Alfred-Döblin-Platz Allendorfer Weg Alte Allee Alte Brauerei Alte Jakobstraße Altenburger Allee Altenhofer Straße Alt-Lietzow Alt-Stralau Am Bahnhof Grunewald Am Bahnhof Jungfernheide Am Bahnhof Westend Am Berl Am Breiten Luch Am Comeniusplatz Am Containerbahnhof Am Dörferweg Am Dornbusch Am Faulen See Am Fliederbusch Am Glockenturm Am Güterbahnhof Halensee Am Gutshof Am Hain Am Heidebusch Am Johannistisch Am Oberbaum Am Ostbahnhof Am Postbahnhof Am Postfenn Am Postfenn Am Rudolfplatz Am Rupenhorn Am Schillertheater Am Speicher Am Spreebord Am Tempelhofer Berg Am Vogelherd Am Volkspark Am Weinhang Am Westkreuz Am Wriezener Bahnhof Amselstraße Amtsgerichtsplatz An der Barthschen Promenade An der Brauerei An der Fließwiese An der Margaretenhöhe An der Michaelbrücke An der Ostbahn An der Schillingbrücke Andreasplatz Andreasstraße Angerburger Allee Anhalter Straße Anna-Ebermann-Straße Annemariestraße Arcostraße Arendsweg Arndtstraße Arnimstraße Arysallee Aschaffenburger Straße Askanischer Platz Aßmannshauser Straße Astridstraße Auerbacher Straße Auerstraße Augsburger Straße Augsburger Straße Augustastraße Auguste-Viktoria-Straße Avus Avus Axel-Springer-Straße Babelsberger Straße Badenallee Badensche Straße Baerwaldstraße Bahnhofstraße Bahrfeldtstraße Ballenstedter Straße Bamberger Straße Bänschstraße Barbarossastraße Note how the dropdown extends over the width of the select box. This is usually desired. If you select text that does not fit into the select box, it gets an ellipsis added to it automatically.



You can use up and down arrows to navigate the select box, also you can type letters in order to jump to that letter. Control the number of items shown: Aachener Straße Abbestraße Adalbertstraße Adam-von-Trott-Straße Adenauerplatz Admiralstraße Agathe-Lasch-Platz Ahornallee Ahrensfelder Chaussee Ahrenshooper Straße Ahrweilerstraße Akazienallee Albrecht-Achilles-Straße Alemannenallee Alexandrinenstraße Alfred-Döblin-Platz Allendorfer Weg Alte Allee Alte Brauerei Alte Jakobstraße Altenburger Allee Altenhofer Straße Alt-Lietzow Alt-Stralau Am Bahnhof Grunewald Am Bahnhof Jungfernheide Am Bahnhof Westend Am Berl Am Breiten Luch Am Comeniusplatz Am Containerbahnhof Am Dörferweg Am Dornbusch Am Faulen See Am Fliederbusch Am Glockenturm Am Güterbahnhof Halensee Am Gutshof Am Hain Am Heidebusch Am Johannistisch Am Oberbaum Am Ostbahnhof Am Postbahnhof Am Postfenn Am Postfenn Am Rudolfplatz Am Rupenhorn Am Schillertheater Am Speicher Am Spreebord Am Tempelhofer Berg Am Vogelherd Am Volkspark Am Weinhang Am Westkreuz Am Wriezener Bahnhof Amselstraße Amtsgerichtsplatz An der Barthschen Promenade An der Brauerei An der Fließwiese An der Margaretenhöhe An der Michaelbrücke An der Ostbahn An der Schillingbrücke Andreasplatz Andreasstraße Angerburger Allee Anhalter Straße Anna-Ebermann-Straße Annemariestraße Arcostraße Arendsweg Arndtstraße Arnimstraße Arysallee Aschaffenburger Straße Askanischer Platz Aßmannshauser Straße Astridstraße Auerbacher Straße Auerstraße Augsburger Straße Augsburger Straße Augustastraße Auguste-Viktoria-Straße Avus Avus Axel-Springer-Straße Babelsberger Straße Badenallee Badensche Straße Baerwaldstraße Bahnhofstraße Bahrfeldtstraße Ballenstedter Straße Bamberger Straße Bänschstraße Barbarossastraße Dropdown is resized to fit the options: Aachener Straße Abbestraße Adalbertstraße Adam-von-Trott-Straße Adenauerplatz Admiralstraße Agathe-Lasch-Platz Ahornallee Ahrensfelder Chaussee Ahrenshooper Straße Ahrweilerstraße Akazienallee Albrecht-Achilles-Straße Alemannenallee Alexandrinenstraße Alfred-Döblin-Platz Allendorfer Weg Alte Allee Alte Brauerei Alte Jakobstraße Altenburger Allee Altenhofer Straße Alt-Lietzow Alt-Stralau Am Bahnhof Grunewald Am Bahnhof Jungfernheide Am Bahnhof Westend Am Berl Am Breiten Luch Am Comeniusplatz Am Containerbahnhof Am Dörferweg Am Dornbusch Am Faulen See Am Fliederbusch Am Glockenturm Am Güterbahnhof Halensee Am Gutshof Am Hain Am Heidebusch Am Johannistisch Am Oberbaum Am Ostbahnhof Am Postbahnhof Am Postfenn Am Postfenn Am Rudolfplatz Am Rupenhorn Am Schillertheater Am Speicher Am Spreebord Am Tempelhofer Berg Am Vogelherd Am Volkspark Am Weinhang Am Westkreuz Am Wriezener Bahnhof Amselstraße Amtsgerichtsplatz An der Barthschen Promenade An der Brauerei An der Fließwiese An der Margaretenhöhe An der Michaelbrücke An der Ostbahn An der Schillingbrücke Andreasplatz Andreasstraße Angerburger Allee Anhalter Straße Anna-Ebermann-Straße Annemariestraße Arcostraße Arendsweg Arndtstraße Arnimstraße Arysallee Aschaffenburger Straße Askanischer Platz Aßmannshauser Straße Astridstraße Auerbacher Straße Auerstraße Augsburger Straße Augsburger Straße Augustastraße Auguste-Viktoria-Straße Avus Avus Axel-Springer-Straße Babelsberger Straße Badenallee Badensche Straße Baerwaldstraße Bahnhofstraße Bahrfeldtstraße Ballenstedter Straße Bamberger Straße Bänschstraße Barbarossastraße Dropdown is resized to 100px, and a change function is wired: Aachener Straße Abbestraße Adalbertstraße Adam-von-Trott-Straße Adenauerplatz Admiralstraße Agathe-Lasch-Platz Ahornallee Ahrensfelder Chaussee Ahrenshooper Straße Ahrweilerstraße Akazienallee Albrecht-Achilles-Straße Alemannenallee Alexandrinenstraße Alfred-Döblin-Platz Allendorfer Weg Alte Allee Alte Brauerei Alte Jakobstraße Altenburger Allee Altenhofer Straße Alt-Lietzow Alt-Stralau Am Bahnhof Grunewald Am Bahnhof Jungfernheide Am Bahnhof Westend Am Berl Am Breiten Luch Am Comeniusplatz Am Containerbahnhof Am Dörferweg Am Dornbusch Am Faulen See Am Fliederbusch Am Glockenturm Am Güterbahnhof Halensee Am Gutshof Am Hain Am Heidebusch Am Johannistisch Am Oberbaum Am Ostbahnhof Am Postbahnhof Am Postfenn Am Postfenn Am Rudolfplatz Am Rupenhorn Am Schillertheater Am Speicher Am Spreebord Am Tempelhofer Berg Am Vogelherd Am Volkspark Am Weinhang Am Westkreuz Am Wriezener Bahnhof Amselstraße Amtsgerichtsplatz An der Barthschen Promenade An der Brauerei An der Fließwiese An der Margaretenhöhe An der Michaelbrücke An der Ostbahn An der Schillingbrücke Andreasplatz Andreasstraße Angerburger Allee Anhalter Straße Anna-Ebermann-Straße Annemariestraße Arcostraße Arendsweg Arndtstraße Arnimstraße Arysallee Aschaffenburger Straße Askanischer Platz Aßmannshauser Straße Astridstraße Auerbacher Straße Auerstraße Augsburger Straße Augsburger Straße Augustastraße Auguste-Viktoria-Straße Avus Avus Axel-Springer-Straße Babelsberger Straße Badenallee Badensche Straße Baerwaldstraße Bahnhofstraße Bahrfeldtstraße Ballenstedter Straße Bamberger Straße Bänschstraße Barbarossastraße Starting with the following select box:

Widgetizing an input You have more control when you widgetize an input, or a set of inputs. Five inputs are widgetized to use the same dropdown body. This is very useful in reports where you have to make identical selections for sets of items. This saves bandwidth as well.

The last param in the change function gives you the index of the triggering input. You can widgetize any number of inputs. You can only widgetize one select at a time. A single input is widgetized, but two dropdown widgets are wired into it. This means that both dropdowns feed into one form input. This is useful when you want to show two different inputs, usually one at a time, but simplify the server side by using a single form name. You can wire any number of dropdowns into a single input, just make sure you hide some of them because they will all be visible when created.

Change dropdown: non-meat: meat:

You have more control when you widgetize an input, or a set of inputs.You can widgetize any number of inputs. You can only widgetize one select at a time.You can wire any number of dropdowns into a single input, just make sure you hide some of them because they will all be visible when created.

Using pre-built options Instead of letting the widget built the options body for you via an existing select or a JSON object, sometimes it may be desirable to build the object yourself. For example you might want to build a large options body on the server side - saving client side init time.

Another advantage to using a prebuilt options body is the ability to skin it. You can easily experiment with what can go inside the options body.



To use an prebuilt options body, pass a jquery reference to it as the options param. Note: in order to avoid browser positioning weirdnesses, I recommend that you place the dropdown options div at the bottom of your DOM, ideally as a direct child of the BODY tag You can emulate <optgroup> support using prebuilt options. use 'optgroup' class on your options div and the following markup: You can also add images or whatever you want (within reason) to the dropdown body. As of 0.5.2, the options can be a function that returns either json or a jquery. The this in the function is the dropdown being widgetized.



Using Advanced Options Resize options to fit (a large) select: There is another option resizeOptionsToFitSelect which defaults to true. Usually you want to resize the options, but not the select. A dictionary tree of the dropdown options is built to do quick selections when user types a letter or letters. By default the dictionary is 3 letters deep, meaning that only the first 3 letters of each option are added to the dictionary.



The option lookupMaxWordLength sets the number of letters to remember. Increasing this number will lead to slower widget init time. The question of "how much slower?" is up to you to answer. Go ahead and type some weird European street names into the dropdown and watch it seek to them. Press 'b' a few times in a row and see what happens. In order to make the dropdown widget less of a CPU hog, keyboard events are debounced, this can make the widget seem less responsive. You can use the options debounceLookupMs and debounceArrowsMs to change the debounce intervals. The default values are debounceLookupMs =200 and debounceArrowsMs =50. This dropdown should seem more responsive than the others (unless it hogs your CPU). There are 3 options which control the ellipsis functionality. If ellipsisSelectText

ellipsisText by default is set to "..." but can be anything.

Normally charWidth is null, which means that determining where to chop of the text is done using magic. If the magic fails, you can set the character width that is used in the calculation here. Double values work fine. Not surprisingly, the text is chopped off much sooner then it needs to be now.