Login Register

FilteringSelect

FilteringSelect is like an HTML SELECT tag, but is populated dynamically. It works very nicely with very large data sets because it can load and page data as needed. It also resembles ComboBox, but does not allow values outside of the provided ones.

When the user tries to submit invalid input (say if they choose an option, and the legal options change) the user gets a warning message, but the Select keeps text box input as is and also keeps the last valid submit value. If the user selects the text box and presses Escape on the keyboard, the text box reverts to the last valid value, corresponding to the hidden value. This change guarantees that you will always get a valid submit value.

Examples

First, here is a FilteringSelect with inlined data:

<!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>Filter Select Example 1</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.FilteringSelect");
     </script>
</head>
<body class="tundra">
        <select dojoType="dijit.form.FilteringSelect"
        name="state3"
        autocomplete="false"
        value="CA">

                <option value="CA" selected="selected">California</option>
                <option value="IL" >Illinois</option>
                <option value="NY" >New York</option>
                <option value="TX" >Texas</option>
        </select>
</body></html>

As with ComboBox, has a value attribute. Unlike ComboBox, this value refers to the value attribute of the <option> tag. For example, if you set the value to AL, the text "Alabama" will appear in the text box on load. If you want to change the value attribute programmatically, use

dijit.byId("yourwidgetid").setValue("yourhiddenvalue")

Like ComboBox FilteringSelect is dojo.data-enabled. As with all dojo.data stores, you can add an identifier field to the top level of your data. The value of the identifier field tells the store which field in your data contains the submit value. Here's an example from states.txt:

{
identifier:"abbreviation",
items: [
        {name:"Alabama", label:"Alabama",abbreviation:"AL"},
        ...

This code shows an identifier set to abbreviation. The identifier instructs the dojo.data store to set the submit value of the items in this store to the value of the attribute named abbreviation. In this example, the first item has a field named abbreviation with a value of AL. If one of your users selected that item in your FilteringSelect, the form would submit AL to your server.

Here's the corresponding FilteringSelect

<!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>Data-Enabled FilteringSelect</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
        <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.FilteringSelect");
       dojo.require("dojo.data.ItemFileReadStore");
   </script>
</head>
<body class="tundra">
        <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
              url="states.txt">
</div>
        <form method="post">
                <input dojoType="dijit.form.FilteringSelect"
                    store="stateStore"
                        searchAttr="name"
                        name="state1"
                        autocomplete="true"
                        />

            <input type="submit" value="Go!" />
        </form>
</body></html>

The net result of the identifier is that you can easily set the submit attribute of any number of Selects using the same data without actually adding extra attributes to the Selects.

dijit.form.FilteringSelect
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/td>
ignoreCase Boolean
true
Does the ComboBox menu ignore case?
labelAttr String
searchAttr
String Searches pattern match against this field String Optional. The text that actually appears in the drop down. If not specified, the searchAttr text is used instead.
labelType String
text
"html" or "text"
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 String Reference to data provider object used by this ComboBox.
Methods
setDisplayedValue(/*String*/ label) Set label (and corresponding value) to "label"
setValue(/*String*/ value) Set value (and corresponding label) to "value"

Accessibility

Keyboard

ActionKey
Open the menu of options (filtered by current input)Down arrow
Navigate through the optionsUp and down arrows
Pick an optionEnter
Close the menu of options without picking oneEsc

Known Issues

JAWS 8 and Window-Eyes 6 may fail to read an option when it becomes highlighted.

AttachmentSize
states.txt3.76 KB

DISABLED and READONLY

Also, this widget is missing the "DISABLED" and "READONLY" attributes. Or has it been intentionally left out to bring in a new implementation that I am not aware of?

Since I am loading the option values dynamically, I want to disable the select box when the value "None" is iterated as the only choice. They can still type invalid values (e.g. "No"), and this shouldn't be allowed.

- Minh

See...

... the Common Features section of Part 2. All HTML attributes that are not widget attributes are copied over. In addition, you may set the disabled property programmatically with dijit.byId("whatever").setDisabled(true);

Has this been tested or verified by anyone?

This seems to imply that I can write

<input dojoType="dijit.form.FilteringSelect" readonly ...>

and prevent users from typing into the edit field that the control is converted to. This is not the case using Dojo 1.0.2 based on my tests.

I want a real option control in which only the options in the list can possibly be entered, which I think is a very key quality of the original HTML control.

real option conrol

I encountered the same problem. I want to use filteringSelect in a way that just it's options can be entered.
I still didn't find good solution for that.

Form with input dojoType="dijit.form.FilteringSelect"

Hi,

When it`s submited a form with widget dijit.form.FilteringSelect, are sending two parameters with the same value and distinct name.
the name one is good and other is empty.

the output server after submit is :

28-sep-2007 12:54:46 org.apache.tomcat.util.http.Parameters processParameters
WARNING: Parameters: Invalid chunk ignored.

the url generated after submit is:
http://localhost:8080/app/frameset?=All&codigo=All&__format=html&__repor...

WARNING!
(=All&Codigo=All)

i think that the problem is in generated code of FilteringSelect:

how can i avoid this behaviour?

thanks!
donkelito

The Easiest Way...

... is to use a DIV instead of an INPUT box. The only problem is this doesn't degrade well - e.g. if JS is turned off or it's run in an older browser, the user will be left with no way to select something.

Or you can get around the problem altogether by submitting the form via XHR, where you can carefully control the parameters. It may require rearchitecting the app, but it often pays dividends.

dojo/method not applyable ?!

i try to use the great feature dojo/method, but i cannot make it work in conjuntion with FilteringSelect. Is this feature not supported for FilteringSelect or do i make a mistake?

this code fragment is placed within the <_select> tag!

<_script type="dojo/method" event="onChange">
alert('change');
<_/script>
(I use the _, otherwise the script tag wont appear ...)

In comparison dojo.connect works fine!
dojo.addOnLoad(function() {
dojo.connect(dijit.byId('liniennr'), 'onChange', 'test');
});

greetings

Accless

Validating input

This code snippet can be used to alert the user that the text they entered is invalid. It then replaces their invalid entry with the previous value.

<!-- Use onblur event to trigger check -->
<select name="event_level_threshold" dojoAttachPoint="event_level_threshold" dojoType="dijit.form.FilteringSelect"
onblur="checkOptions(this)">

<option>1</option>
<option>2</option>
</select>

function checkOptions(e)
{
        if (e.isValid())
                return;
        var dojoe=dojo.byId(e.id);
        alert(dojoe.value+' is invalid');
        var dijite=dijit.byId(e.id);
        dijite.setValue(dojoe.getAttribute('valuenow'));
        dijite.setDisplayedValue(dojoe.getAttribute('valuenow'));
}


PS - I'm a newbie - comments, improvements welcome. Code was edited for the post, may have syntax errors.

Validating Input DURING (and not after) user input

Hi @ll,

a better approach for validating uers input is to connect the validate process to 'validate' instead of 'onblur'.

var myFilterWidget = dijit.byId(yourFilterSelectID);
var myOKButton   = dijit.byId(yourOkButtonID);

dojo.connect(myFilterWidget,'validate','setDisabledOKButton');

function setDisabledOKButton() {
   myOKButton.setDisabled(!(myFilterWidget.isValid());
}

The advantage is, that other depending widgets (like an OK-Button for proceeding) are already rendered during user input.

Greetings

AccLess

PS: Tested with Dojo 0.9

A Filtering select doesn't drop in Opera

A Filtering select doesn't drop in Opera. Internet Explorer and Mozilla don't have such problems. I thought it was a bug in my application, but in the examples from the site there is also such a problem.

Ouch!

I've been developing for months with Dojo & didn't hear that Opera support was dropped.

Most of my UI works (complex grid, calendar, buttons) - just a few filtering select widgets break (in Opera 9.5) .

Is there a dijit fix/alternative? I'll go to HTML combo boxes, but this is _very_ disappointing. Will IE support be dropped as well? How can we be sure it won't?

Widgets haven't supported Opera since 0.9

IE has a slightly larger market share than Opera. And as much as we'd love to drop support for IE 6.0, we know we can't do that for quite some time.

Note that Dojo core still supports Opera; Dijit does not. Given trends in Opera's market share and the demands on our coding and testing, we decided couldn't contain it and deliver quality Dijit code on the other 3 top browsers and all of their variants. Dijit is 'best effort' right now, and we're happy to accept patches to make Dijits work.

Zoiks!

I've been using Dojo for two weeks and just realized they don't support Chrome! Just kidding of course, but hopefully Dojo will support it when it's officially released and gains some market share. It's unfortunate, but new browsers are going to have to cope with IE compatibility as much as compliance with the published standards.

CSS dressing

Using the attributes in the example below, it is possible to dress up a native HTML select widget so that it is not so glaringly out of place in FireFox when appearing on the same page as Dojo widgets. This has little if any effect in IE7, and the Opera appearance is distinctly less appealing than the native select widget. This does not change the dropdown arrow much, mostly just the textbox part of the select widget. Tested with the Tundra theme.

The purpose of this CSS is to dress up a native select widget in firefox, and the widget will operate properly in Opera.

<span id=s_example style="vertical-align: top;font-size: small;">
        <select class="dijitReset dijitButtonNode" style="text-align:left;" name="example" id="example" onChange="exampleChooser(this.value);" >
          <option value="examples">Example functions</option>
          <option value="parabolex">Parabola</option>
          <option value="rosen">Rosenbrock</option>
          <option value="himmel">Himmelblau</option>
          <option value="4 terms">4 terms</option>
        </select>
</span>

As an alternative solution, It should be possible to do browser detection for Opera, and instantiate the widget or adjust its attributes accordingly, but this seems to be harder than it sounds, and may lead to future incompatibilities.

Better than CSS dressing - widget instantiation

The CSS dressing method above has some side effects, for example breaking the charting widget in IE.

While still imperfect, it turns out that for FilteringSelect widgets it's possible to splat a Dojo widget right over an already-instantiated HTML select widget.

Here's an example, tested using Dojo 1.2:

...

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

...

function foo(key){alert(key);}

if (!dojo.isOpera) {  //use pretty dropdowns for Firefox.  These break Opera.
    var dropfunc = new dijit.form.FilteringSelect( {style:"text-align:left;", onChange:foo}, dojo.byId("example"));
    }

...

</head>
<body class="tundra">

...

  <select style="text-align:left;" id="example" onChange="foo(this.value);" >
      <option value="examples">Example functions</option>
      <option value="parabolex">Parabola</option>
      <option value="rosen">Rosenbrock</option>
      <option value="himmel">Himmelblau</option>
      <option value="4 terms">4 terms</option>
  </select>

...

For Opera browsers you get the HTML select. For other browsers (tested IE7, FF3) you get the Dojo-prettified filteringSelect. Remarkably, the original HTML select options survive the construction of the FilteringSelect widget.

Again, the primary reason for all this bother is to have styled select widgets for Firefox while not breaking Opera.

This may lead to future problems, but they're more likely to be from future Dojo versions rather than future browser versions. So they should be caught during testing when you upgrade Dojo.

when execute the method setDisabled, my widget disappear

When execute the method setDisabled in FilteringSelect widget, this one disappears. If i click in dissapeared widget gap the widget appears disabled. This behaviour is like the widget wasn´t painted in my firefox. In IE works fine. Dojo toolkit 0.9.0, any Idea?

Preventing FilteringSelect from disappearing

Hi @ll,

i just encountered the same problem with dojo 0.9. Just copy this line of code and put it right after invoking setDisabled()!

dijit.byId(yourWidgetId).domNode.style.display='block';

It works with FF 2.0.

Greetings

accless

Page broken

Hi,

This page is broken, it can't be viewed with IE7. It throws an "Operation aborted" error. The problem is that the Javascript is adding elements to the DOM before it is completely parsed. To fix it move this lines:

dojo.parser.parse(dojo.byId("code1"));
dojo.parser.parse(dojo.byId("code2"));

to an onLoad event:

dojo.addOnLoad( function() {
	dojo.parser.parse(dojo.byId("code1"));
	dojo.parser.parse(dojo.byId("code2"));
});

Some other pages in the Book of Dojo are also broken in the same way.

Dynamic loading of Data

Is it possible, to use a kind of dynamic datastore?
I want to have a FilteringSelect widget, that every time it is used by the user connects to url and also submit other form field values. The server than can use the values to generate adapted response. Then the FilteringSelect widget must to be refreshed.
Is there a way?

Dynamic loading example

var select = dijit.byId("selectId");
var url = "/foo/bar.php?load=23";

var store = new dojo.data.ItemFileReadStore({url:url});
select.store = store;

Hope this helps!

QueryReadStore will not work with FilteringSelect

Just a note, QueryReadStore will not work with a FilteringSelect, after each character you type it will re-fetch from the server and essentially reset your Select when you leave the field. This is also true if you Select an item from the field. I guess this is the "expected" behavior with this data store:

http://trac.dojotoolkit.org/ticket/6071

Per Manel Clos' comment above, the only way that I know of to re-fetch your data from the server is to create a new store and assign it to the widget. Trac 6073 asks if we can enhance ItemFileReadStore to be able to re-fetch from the server instead of using the cached data.

Josh

Actually I'm wrong on this -

Actually I'm wrong on this - you can use QueryReadStore with FilteringSelect as long as your server-side callback handles the paramaters on the query string correctly - see comments in the trac link.

Josh

To Destroy

//fabiohenriqueviana@hotmail.com
var myDijit = dojo.byId('mydiv');
if (myDijit != null) {myDijit.destroy();}

Disable text input

Hi,

Consultation, how disables text input, for use as an element COMBOBOX common?
Are understand?
The idea is that the user does not enter into the combobox.

Thanks!

FilteringSelect render option like "75-&gt"; and not like "75>"

In my html code, i have included a filtering select with de next option.

<select dojoType="dijit.form.FilteringSelect" size="10" id="combo">
<option value='6'>75-></option>
</select>

This option is rendered like "75-&gt"; and not like "75->"

If i use html without dojo, it´s rendered ok

<select  size="10" id="combo">
<option value='6'>75-></option>
</select>

any idea ?
what´s the problem ?

FilteringSelect render option like "75-&gt"; and not like "75>"

I have the same exact problem, except with non breaking spaces '&nbsp'. I've used them with standard HTML selects to get a 'multi column' effect, keeping everything equally spaced by using a monospace font. But with the filteringselect, '&nbsp' is getting literally shown in the drop down.

Does anyone have any suggestions? This drove me crazy all day today...

Thanks!

problem displaying &nbsp; in option values...

i also have this problem! i'm trying to put these in some of the FilterSelect/ComboBox display labels and they're getting displayed literally rather than spaces. i have not been able to figure out!! the strange thing is, if the are in the html and i don't use a store, it displays as i'd expect... can anybody give me some advice on how to get this to work? thanks!

problem displaying &nbsp;  in option values...

Did you try setting labelType="html" for the FilterSelect?

Filtering Selection invalid Quantifier

Hi, i have a problem with the filtering selection:
i need to match records that contain the text i put into select input.
i found in ComboBox.js at line 52 this description:

<code>
// 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"
queryExpr: "${0}*",
</code>
i substituted default queryexpr with "*${0}*" as suggested before .
When the page runs i get the following error:
*$ invalid quantifier;

Filtering Selection invalid Quantifier

Hi, i have a problem with the filtering selection:
i need to match records that contain the text i put into select input.
i found in ComboBox.js at line 52 this description:

// 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"
		queryExpr: '${0}*',

i substituted default queryexpr with "*${0}*" as suggested before.
When the page runs i get the following error:
'*$' invalid quantifier at dojo.js line 1028

i tried with the other regular expr suggested ('${0}*' and '${0}') and in this way everything works fine.

the problem seems to be the chars *$

any suggestion??

thanks

resolved in 1.2?

I've found this trac:
http://trac.dojotoolkit.org/ticket/6390

-Jose.

Error in typing in Chinese characters with Dojo 1.10

Hi, i have a problem with the filtering selection:

 
When I use dojo.js of "version Dojo 1.0.2" for FilteringSelect, I can type Chinese characters without error. However, I change the source
to dojo.js of "version of Dojo 1.1.0." I get an error with "this.keypress is not a function". All these conditions happen in Firefox only. How can I do ?

bugs must be reported at bugs.dojotoolkit.org

Do you still experience this problem on 1.1.1? If so, could you please report a ticket at bugs.dojotoolkit.org? The comments here are for the book content only. Thanks.

displaced drop-down of filteringselect

I have a filteringselect that uses a ItmReadFileStore. When the dropdown is clicked, the page shakes and the container of the list in the dropdown is displaced. do anyone know why this is happening?? it makes the page look ugly

How do I populate value from DWR to the FilteringSelect List?

Hi,

I have retrieve value via dwr and I am not sure how to load into the FilteringSelect field. The folllowing is my code:

function getAllAccountLs() {
        AccountManager.getAllAccountsNameList(populateDataAcctList);
}
              
function populateDataAcctList(account) {
      dwr.util.removeAllOptions("acctCat");
      dwr.util.addOptions("acctCat",account,"name");  --> this is where it returns a set of Array
}

Based on the code above, it will only populate to the normal text type but not the filteringSelect type. Please help!

Thanks & Regards,
Kay Nny

set default value

How do you get the filter select to display a given value. The setDisplayedValue and setValue options do not work. Setting a value on a select object should not be this confusing what am I missing?

Thanks

I noticed something strange

I noticed something strange in filtering select, present in version 1.1 (cdn deploy) and also in 1.1.1.
If this is the states.txt file

{identifier:"abbreviation",

items: [

	{name:"Alabama", abbreviation:"AL", mytest: {name:"DONTSHOWME",abbreviation:"fi",uno:1,due:2}},

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

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

]}

I can see an element of the filteringselect showing the DONTSHOWME element.
this is a very crazy behaviours, can you explain it?
there is a patch for this?

Multiple choice?

Hi,

is there an attribute I can use with this widget, to build a multiple choice combobox? Else, what is the recommended way of doing this with Dojo?

Thanks!
Eduardo

I'm using dojo which is

I'm using dojo which is intergrated in zendFramework.
About the " FilteringSelect ", all the code are copied from here only changed the dojo path:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Filter Select Example 1</title>
    <style type="text/css">
        @import "/externals/dojo/dijit/themes/tundra/tundra.css";
        @import "/externals/dojo/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="/externals/dojo/dojo/dojo.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.FilteringSelect");
     </script>
</head>
<body class="tundra">
        <select dojoType="dijit.form.FilteringSelect"
        name="state3"
        autocomplete="false"
        value="CA">

                <option value="CA" selected="selected">California</option>
                <option value="IL" >Illinois</option>
                <option value="NY" >New York</option>
                <option value="TX" >Texas</option>
        </select>
</body>

But the firebug list the error:

http://localhost/externals/dojo/dijit/form/nls/en/validate.js 404

Well , there is no nls/en/validate.js in dojo.
But this example runs well firefox.

I got some similar errors

I got some similar errors and it turned out that the specific language files are missing. Once a build of dojo is created I think these errors will go away. Mine went away when I upgraded my Dojo to the latest version (1.2.3). I dont think the errors actually break anything.

see this faq

http://dojotoolkit.org/support/faq/why-do-i-always-see-404s-dijit-nls-en...

It is harmless. It's the search for localization files and is avoided by using the build tool.

Accents in ItemReadStore

I am trying to read in a list of entries for the drop down from a text file. The text file has some entries that do have accents and they are not coming in properly.

so the Text file says:{identifier:"abbreviation",
items: [
{name:"FullExtent", label:"Please select a city",abbreviation:"FE"},
{name:"Calgary", label:"Calgary",abbreviation:"CA"},
{name:"Edmonton", label:"Edmonton",abbreviation:"ED"},
{name:"Fredericton", label:"Fredericton",abbreviation:"FD"},
{name:"Halifax", label:"Halifax",abbreviation:"HA"},
{name:"Kelowna", label:"Kelowna",abbreviation:"KE"},
{name:"London", label:"London",abbreviation:"LO"},
{name:"Montr&#233al", label:"Montréal",abbreviation:"MO"},
{name:"Ottawa", label:"Ottawa",abbreviation:"OT"},
{name:"Québec", label:"Québec",abbreviation:"QC"},

Note: I have tried just using a Accent as in Quebec and I have tried using the HTML code as well as in Montreal.

The out put of this is in the drop down box is:
Montr&#233al (it also shows the ; but on the post it reads this correctly and displays as accent)
and
Qu?c

Any ideas how to get it to successfully read the accents??

charsets

I tried using "Québec" in a filteringSelect, and it rendered correctly.

Make sure you are setting a charset by including this line in the head of your page:

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

There may be a problem with charsets in the text document you are using as well. If you're still have trouble, please post the code you're using to import the text file.

Autocomplete in combox is not working in Struts2 framework.

I too facing the similar type of problem...i.e, Autocomplete feature using dojo.data.ItemFileReadStore in dijit.form.Combobox is not able to get the data from states.txt file when I called it from Struts2 framework. Getting bad http response code:404 error. If I invoke the JSP directly, then it is working fine.

The JSP code is below:

<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="isDebug: true, 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>
             
     Select Employee.<input dojoType="dijit.form.ComboBox"
                store="stateStore"           
                searchAttr="name"
                name="state2"
                onChange="setVal2" />

       
</body>

States.txt:

{
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"}
]
}

I placed the states.txt file in the same directory where the above JSP is available. I tried by giving the path as /states.txt...but could not get the data through Struts framework.

Can any one please help me out on this.

(No subject)