ComboBox

Submitted by simonjb on Sat, 05/05/2007 - 21:28.

The ComboBox is a hybrid between a SELECT combo box and a text field. Like a SELECT, you provide a list of acceptable values. Unlike SELECT, and like a text box, the user can ignore all the choices and type whatever they want. This is especially good for open-ended multiple choice questions. Rather than having two fields - a combo box and an Other text box - you can use just one field.

Note that SELECT's always have value/description pairs, e.g. the OPTION's value attribute and the OPTION's body text. ComboBoxes do not. They only pass their displayed text - just like a text box.

Examples

Using inlined data with the ComboBox is very much like using a native <select> tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Simple ComboBox</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.form.ComboBox");

       function setVal1(value) {

           console.debug("Selected "+value);

       }

   </script>

</head>

<body class="tundra">

        <select name="state1"

                dojoType="dijit.form.ComboBox"

                autocomplete="false"

                value="California"

                onChange="setVal1">

                <option selected="selected">California</option>

                <option >Illinois</option>

                <option >New York</option>

                <option >Texas</option>

        </select>

</body></html>

Name and autocomplete are passed through to the HTML. The value attribute enables you to set the default value. The option tags do not have hidden submit values; to use a hidden value, change your ComboBoxes to FilteringSelects.

Important: IE7 only uses the selected attribute of an option tag and ignores the value attribute on the select tag. For best results, set both the selected attribute on the default option and the value attribute on the select.

dojo.Data-Enabled ComboBox

ComboBox, FilteringSelect, Tree and Grid are dojo.data-Enabled widgets. This means rather than specifying all the data in the page - the OPTION's or tree nodes - you can have dojo.data fetch them from a server-based store. The unified dojo.data architecture, can get its data from various places - databases, web services, etc.. See the dojo.data manual section for complete details.

The code:

<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"

              url="states.txt"></div>

... looks like a widget, but it's not. (Only dojoTypes from the module dijit.___ are widgets). This tag takes advantage of dojo.parser, which creates JavaScript objects by using standard HTML. You can read about Dojo.parser at Understanding the Parser in Part 3.

For this example, we'll use a fixed JSON data store. You can download it from states.txt below. Here's an excerpt:

{

identifier:"abbreviation",

items: [

        {name:"Alabama", label:"Alabama",abbreviation:"AL"},

        {name:"Alaska", label:"Alaska",abbreviation:"AK"},

        {name:"American Samoa", label:"American Samoa",abbreviation:"AS"},

        {name:"Arizona", label:"Arizona",abbreviation:"AZ"},

The following example makes use of our data store:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Simple ComboBox</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.form.ComboBox");

       dojo.require("dojo.data.ItemFileReadStore");

       function setVal2(value) {

           console.debug("Selected "+value);

       }

   </script>

</head>

<body class="tundra">

        <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" 

              url="states.txt"></div>

     <input dojoType="dijit.form.ComboBox"

                store="stateStore"

                value="California"

                searchAttr="name"

                name="state2"

                onChange="setVal2" />

</body></html>

jsId is the name of the global variable that the store is assigned to. url can be used to suck data out of particular URL, perhaps a web service. Instead of using the url attribute, you can embed your data directly (as is common in traditional server-side programming) using the data attribute.

dijit.form.ComboBox Auto-completing text box The drop down box's values are populated from an class called a data provider, which returns a list of values based on the characters that the user has typed into the input box. Some of the options to the ComboBox are actually arguments to the data provider.
Attributes
autoComplete	Boolean true	If you type in a partial string, and then tab out of the <input> box, automatically copy the first entry displayed in the drop down list to the <input> field
hasDownArrow	Boolean true	Set this textbox to have a down arrow button
ignoreCase	Boolean true	True if the ComboBox should ignore case when matching possible items.
pageSize	Integer Infinity	Argument to data provider. Specifies number of search results per page (before hitting "next" button)
query	Object {}	A query that can be passed to 'store' to initially filter the items, before doing further filtering based on searchAttr and the key.
searchAttr	String name	Searches pattern match against this field
searchDelay	Integer 100	Delay in milliseconds between when user types something and we start searching based on that value
store	Object	Reference to data provider object used by this ComboBox.

Accessibility

Keyboard

Action	Key
Open the menu of options (filtered by current input)	Down arrow
Navigate through the options	Up and down arrows
Pick an option	Enter
Close the menu of options without picking one	Esc

Known Issues (updated for 1.1)

JAWS 8 and Window-Eyes 6 may fail to read an option when it becomes highlighted. In Dojo 1.1 the Combobox was updated so that JAWS 9 will speak "editable combo" when the Combobox gets focus. However, there are some issues reading the highlighted choice. Generally JAWS 9 with Firefox 2 will only speak the part of the word that is currently selected in the textbox. For example, if you are working with a ComboBox containing the US state names and you type in an "I" to filter the list of states. If the user arrows down and highlights "Iowa" in the drop down list, "Iowa" will be displayed in the textbox with the "owa" portiion selected. JAWS 9 will speak, "owa" rather than "Iowa". This is not an issue with Firefox 3 and JAWS 9.

Attachment	Size
states.txt	3.76 KB

json schema

Submitted by peller on Tue, 10/30/2007 - 04:10.

I'm confused about the schema of the json provided to the combobox, particularly the meaning of 'identifier'. 'name' seems to be the only one with meaning, as specified by the searchAttr (we need to doc this better. Do the other attributes play any role?

unique ID

Submitted by ktiedt on Tue, 10/30/2007 - 13:33.

identifier tells the DataStore what field in the dataset is the unique identifier. The others are more or less arbitrary I believe... except Label... which specifics the rootNode's label when not building a "forest" tree.

-Karl

well, that's part of my confusion

Submitted by peller on Tue, 10/30/2007 - 16:02.

'label' appears to have no meaning to ComboBox, AFAICT. Perhaps we can provide a reference to the dojo.data docs where the identifier stuff is explained?

labelAttr?

Submitted by peller on Fri, 11/09/2007 - 14:41.

Someone on IRC said there's a labelAttr attribute, though I don't see one. searchAttr is there, though it probably needs to be stressed how this applies to the data model. An introductory paragraph to discuss the relation to data model might be helpful.

Nope, that's FilteringSelect

Submitted by criecke on Mon, 11/12/2007 - 01:03.

As stated in the first section: "Note that SELECT's always have value/description pairs, e.g. the OPTION's value attribute and the OPTION's body text. ComboBoxes do not. They only pass their displayed text - just like a text box."

How to populate ComboBox with options programatically

Submitted by scorpio on Sun, 12/16/2007 - 13:27.

Attach onchange

Submitted by betz on Thu, 12/27/2007 - 14:32.

Code snippet.

this.myCombo = new dijit.form.ComboBox({
value: '',
name:"myComboBox",
id:"myComboBox",
store: myStore,
searchAttr:"name",
onChange:checkCombo
}, dojo.byId("frmInput"));
dojo.connect(dojo.byId('frmInput'),'onchange','checkCombo');

function checkCombo(e)
/*
This function handles two types of events - onChange (specified in the 'new dijit.form.ComboBox' code), and onchange (from the connect statement).

When onChange fires, e is a string, and the function returns true or false to indicate valid or not.

When onchange fires, e is an event, and allows you to modify the target attribute. In this case, it corrects the input by converting & to and.

Don't call it twice - meaning in both the creation of the ComboBox and with a connect. It won't do any harm, it is just unnecessary.
*/
{
switch (typeof e)
{
case 'object':
if (e.type == 'change')
{
var invalidChars=/&/;
var dojoe=dojo.byId(e.target.id);
var v=dojoe.value;
if (!v.match(invalidChars))
return true;
var v2=v.replace(/\ ?&\ ?/g,' and ');
var dijite=dijit.byId(e.target.id);
dijite.setValue(v2);
dijite.setDisplayedValue(v2);
return false;
}
break;
case 'string':
var invalidChars=/&/;
if (!e.match(invalidChars))
return true;
return false;
break;
}
return true;
}

_{PS - Still a newbie, code was edited for the post, may have errors. dojo 0.9}

Dynamic creation

Submitted by tkarthikn on Fri, 01/25/2008 - 13:25.

hi,

is there a way i could create this ComboBox dynamically?

Is there a way to attach onmouseover to combobox list and show

Submitted by santisagar on Fri, 01/25/2008 - 18:36.

tool tip there.
for Json


{identifier:"rsFormId",

items: [

{rsFormId:"7021366",medName:"100/Sinemet-25(Carbidopa/Levodopa)", render:"false", originalIndex:"1161", status:"Active",abbreviation:"3000260029"},

{rsFormId:"7001110", medName:"Accupril (Quinapril Hcl)",render:"true",originalIndex:"1162",status:"Active",abbreviation:"3000273940"},

{rsFormId:"520308391",medName:"Accupril (Quinapril Hcl)",render:"true",originalIndex:"120",status:"Active",abbreviation:"3000273941"}

]

}
when render = true, that element needed to red and then onmouseover there should be a tool tip to tell this is danger drug.
Please help me.
Regards,

Sagar


    Login or register to post comments



  
    Error: this.onChange is not a function
    Submitted by rita-amritkar on Wed, 02/06/2008 - 06:38.
    I have specified onChange as one of the atttribute.

for this statement I am getting error as,

this.onChange is not a function.
I am not getting whats wrong in the statement.
Any help will be appreciated.
Thanks.

    Login or register to post comments

  

  
    classes and styles desactivated
    Submitted by iBeb on Fri, 03/14/2008 - 11:27.
    I'm a novice with dojo stuff, and I tried to use a dijit combo box in a form.

This form is used to create geographic subdivisions (ie a city in a region, a neighbourhood in a city). I need to put a combobox to select the "parent" of the new element.

For a better readability in the whole list, i've choosen to increase the left padding in  option tags depending on the level.
Paris

     Marais

     République

Barcelone

     blabla

     blabla

Madrid

It works fine without dijit (top level values are not indented, level 1 values have a 15px padding, etc).

But with dijit styles and classes are deactivated, and all the values have the same look... and in the whole list it's very hard to find the right value...

Any idea?
_bertrand

    Login or register to post comments

  

  
    here is my solution
    Submitted by iBeb on Fri, 03/14/2008 - 12:05.
    I couldn't wait so I've decided to edit the .js file...
first: keep class and style attributes:

by changing this:

                    node.style.display="none";

                    return { value: node.getAttribute("value"), name: String(node.innerHTML) };

by this:

                    var bwt= { value: node.getAttribute("value"), name: String(node.innerHTML), style:node.getAttribute("style"), class:node.getAttribute("class") };

                    node.style.display="none";

                    return bwt;

second: set the attribute style and add the class to the dijit class:

by changing this:

            dojo.forEach(results, function(item){

                var menuitem=_this._createOption(item, labelFunc);

                menuitem.className = "dijitMenuItem";

                _this.domNode.insertBefore(menuitem, _this.nextButton);

            });

by this:

            dojo.forEach(results, function(item){

                var menuitem=_this._createOption(item, labelFunc);

                menuitem.className = "dijitMenuItem"+(item.class!='' ? ' '+item.class : '');

                menuitem.setAttribute("style",item.style);

                _this.domNode.insertBefore(menuitem, _this.nextButton);

            });
Now, everything's perfect!

    Login or register to post comments

  

  
    using this property
    Submitted by AloneWalker on Fri, 03/21/2008 - 22:41.
    dear iBEb,
your attachments looks good.i made some fixing according to your codes but how we use this property? could you explain more?

thanks your interest :)

    Login or register to post comments

  

  
    i've changed my code,
    Submitted by iBeb on Tue, 03/25/2008 - 13:36.
    i've changed my code, because "class" was not working on safari.

var items = this.srcNodeRef ? dojo.query("> option", this.srcNodeRef).map(function(node){

bwtS=node.getAttribute("style")?node.getAttribute("style"):'';

bwtC=node.getAttribute("class")?node.getAttribute("class"):'';

bwt={ value: node.getAttribute("value"), name: String(node.innerHTML), classe: bwtC, style: bwtS };

node.style.display="none";

return bwt;                         

}) : {};
and i also changed the code for the class:

dojo.forEach(results, function(item){

var menuitem=_this._createOption(item, labelFunc);

menuitem.className = item.classe!='' ? item.classe : 'dijitMenuItem';

menuitem.setAttribute("style",item.style);

menuitem.value=item.value;

_this.domNode.insertBefore(menuitem, _this.nextButton);

});
you can have a look here : http://admin.absoludream.fr/tests/test_combo.html

padding in option tag doesn't work with ie7 (not a but surprise)... but it works fine with FF and Safari.

    Login or register to post comments

  

  
    Readonly Mode on Input Element
    Submitted by CS44 on Tue, 04/01/2008 - 22:42.
    In order to mimic the behaviour of a basic <select> element, that is - no editable text entry, you'll want to set "readonly='true'" on the <input> element in the dijit.ComboBox template file.

    Login or register to post comments

  

  
    queryExpr
    Submitted by trutwijd on Tue, 04/29/2008 - 23:36.
    The queryExpr attribute (added in 1.1?) is not documented.  From source:
// queryExpr: String

//              dojo.data query expression pattern.

//              `${0}` will be substituted for the user text.

//              `*` is used for wildcards.

//              `${0}*` means "starts with", `*${0}*` means "contains", `${0}` means "is"
This makes up for the lack of the 0.4.3 searchType parameter.
Josh

    Login or register to post comments

  

  
    Repeating items
    Submitted by liviu_holhos on Fri, 05/16/2008 - 07:19.
    I've noticed that the combo does not work if it has duplicate items:
<select autocomplete="false" dojotype="dijit.form.ComboBox" name="persons" value="Liviu">

  <option selected="selected">Liviu</option>

  <option>Marian</option>

  <option>Liviu</option>

</select>
Is this a bug or does the developer have to make sure it does not have duplicate items in the list?

Maybe there is a workaround for this, please let me know if someone can help me with this issue.

Thank you.

    Login or register to post comments

  

  
    Is there a problem with
    Submitted by Wayavo on Fri, 06/20/2008 - 17:50.
    Is there a problem with correctly rendering the Dojo combobox in Firefox?  I copied the example here - without any changes - into an HTML file and tested it - works perfectly with IE and Safari.  Firefox on the otherhand produces a solid gray line which only turns into a combobox when clicked.  I mean FF 2.0.0.14

    Login or register to post comments

  

  
    it's broken on Firefox 2
    Submitted by jbarroso on Thu, 07/03/2008 - 10:33.
    Same thing happened to me... Combobox and FilterginSelect in dojo v1.1.1 are broken on FF2 but also works on FF3 and IE.
the tests included in the release has the same behavior:

dojo-release-1.1.1/dijit/tests/form/test_FilteringSelect.html

dojo-release-1.1.1/dijit/tests/form/test_ComboBox.html

    Login or register to post comments

  

  
    Not broken on Firefox2... broken on IceWeasel
    Submitted by jbarroso on Fri, 07/04/2008 - 08:04.
    Sorry for the post... it's not broken on Firefox 2.
I can reproduce the problem in Debian Icewasel 2.0.0.12 for Linux... (it's like a a fork of Firefox 2.0.0.12)
I've been testing in Firefox 2.0.0.12 on Windows and on LInux and works fine...

    Login or register to post comments

  

  
    this combo box is amazing,
    Submitted by fezza on Thu, 07/10/2008 - 01:19.
    this combo box is amazing, ive been looking for something exactly like this. my only problem is that i need to turn this combo box into links options... so that as soon as you click on the drop down or press enter it goes to a URL. Have seen other comb links but cant seem to combine code successfully? 
Anyone fancy being a life saver? Im guessing that its something really obvious that im just stupidly not realising.

    Login or register to post comments

  

  
    fezza - try this:
    Submitted by trutwijd on Thu, 07/10/2008 - 03:47.
    fezza - try this:
<select id="my_cb" dojoType="dijit.form.ComboBox"

   onChange="javascript: window.location = this.value;"

   ....>

   <option>http://www.dojotoolkit.org</option>

   <option>http://www.google.com</option>

</select>
Keep in mind that the http:// is needed in front for the redirect to work.  You can also call a function and do some validation before directing:
<script type="text/javascript">

   function redirect_em() {

      url = dijit.byId('my_cb').value;

      // do validation here

      window.location = 'http://' + url;

   }

</script>


<select id="my_cb" dojoType="dijit.form.ComboBox"

   onChange="javascript: redirect_em();"

   ....>

   <option>www.dojotoolkit.org</option>

   <option>www.google.com</option>

</select>
Also, the dijit forums (http://dojotoolkit.org/forums/forums/support/dijit) are a much better place for this kind of question.

    Login or register to post comments

  

  
    Problem with code copy/paste.
    Submitted by eduardo on Wed, 10/08/2008 - 03:32.
    Hi,
sorry, in my last two posts, the code I wanted to show you is being truncated somehow (it is now 4.30am, and am too tired to understand why, I'm afraid :-) ).
Anyway, I am creating and filling in the information into this combobox using an ItemFileReadStore All works perfectly fine. But I need, at a certain point in time, to refill the combobox options, via that same store. How can I do this, without reloading the whole page once again?
Thanks... again!

Eduardo

    Login or register to post comments

  

  
    please use the forums
    Submitted by MarcusReimann on Wed, 10/08/2008 - 09:00.
    Eduardo, please use the forums for such questions.
Marcus

    Login or register to post comments

  

  
    dijit.form.ComboBox is broken Firefox/2.0.0.18  (un selectable) 
    Submitted by tjm on Tue, 11/25/2008 - 21:25.
    dijit.form.ComboBox is broken Firefox/2.0.0.18 mac (un selectable)   (class nihilo- this is a theme/css issue)    heres a quick fix  .nihilo .dijitComboBox .dijitButtonNode {

	border-width: 0px 0px 0px 1px;

}
.nihilo .dijitComboBox .dijitButtonNode .dijitArrowButtonInner {

	background:url(images/spriteArrows.png) no-repeat left top;

	height:15px;

	width: 11px;

}

    Login or register to post comments

  

  
    Combo Department and County
    Submitted by r_ramirez_g on Thu, 12/18/2008 - 20:26.
    I have a combo, select an item and I want to load another combo ... but does not go out ...
function updateProv(item, request) {

  var varDpto = datosDptos.getValue(item, "id");

  var combo = dojo.byId('cboprov');

  var datosProv = new dojo.data.ItemFileReadStore({

       url:"datos2.php?tipo=carga&opcion=prov&dpto="+varDpto });

  combo.store = datosProv;

}
function cargarProv() {

  datosDptos.fetchItemByIdentity({identity: cbodpto.getValue(), onItem: updateProv});

}
The combo is called to fill cboprov .... 
Thank you very much for your help

    Login or register to post comments


		
			
				
					
						Home » The Book of Dojo » Part 2: Dijit » Form, Validation, Specialized Input » ComboBox
					
				
									
						  
  
        

Demos
Feature Explorer
Key Links
Quick Start

Downloads
Examples
Spotlight



About

Overview
License






 
  
  
        

Downloads

Current releases
Nightly builds
Archives
Change logs



News

Project Blog
Announcements
Twitter
Planet Dojo






 
  
  
        

Support

FAQ
Forums



Documentation

Quick Start
The Book of Dojo
Porting Guides
API Reference
Developer notes






 
  
  
        

Community

Contributors
General Information
Sites Using Dojo
Subversion
Bug Tracking
Roadmap
Summer of Code



Donate

PayPal donations



Foundation



 
						
					
								
					 
					 
				
		
			
				© The Dojo Foundation, All Rights Reserved.

Search

The Book of Dojo