Solved

Filter state

Posted on 2011-09-15
6
318 Views
Last Modified: 2012-05-12
Hi,

I have a select box that has a list of states and a textbox to filter by state.

the state filter box suppose to filter but I don't how it's done.

I need help!!

Thank you
<input id="TxtState" name="TxtState" style="width: 176px" type="text" onKeyUp="this.form.DispStateBox.onchange()"/>



			 <select name="DispStateBox" style="width: 180px;height:200px;" size="8" 
  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
  onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" > 
			 <cfoutput>
			 <cfloop query="DispState">
			   <option value="#StateID#">#StateName#</option>
			 </cfloop>
			 </cfoutput>
			</select>


function setCityOptions(theSel,fldNameFilter,fldNameTarget,fldNameTargetChild){
  var theForm = theSel.form;
  theForm[fldNameTarget].options.length=0;
  theForm[fldNameTargetChild].options.length=0;
 var theFilter = escape(theForm[fldNameFilter].value.replace(/(^\s*|\s*$)/g,""));
  var theRequest = 'getOptCityName.cfm?selval='+theSel.value+'&filter='+theFilter;
  getSelOptions(theRequest,theForm[fldNameTarget]);
}

Open in new window

0
Comment
Question by:lulu50
  • 4
  • 2
6 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 36546262
OK. I cannot provide the script at the moment but my basic idea is this: for the State you need no AJAX.
You can do it like you did it before AJAX: you put all States into one List and let the JavaScript recreate the State options at every input of filter key characters. You know what I mean?
You put into State filter input field something like this:
<input id="TxtState" name="TxtState" style="width: 176px" type="text" onKeyUp="setStateOptions(this,'DispStateBox');" />

Open in new window

You can even use one of the old scripts that you used before.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 36546622
OK. here is the function:
function setStateOptions(theFilter,fldNameTarget){
  var theForm = theFilter.form;
  var opt = theForm[fldNameTarget].options;
  var rxFilter = new RegExp("^"+theFilter.value,"i");
  opt.length = 0;
  for(var i=0;i<arrStates.length;i++){
    if(arrStates[i][1].match(rxFilter)){
	  opt[opt.length] = new Option(arrStates[i][1],arrStates[i][0]);
	}
  }
}

Open in new window

And your State select looks now like this:
			 <select name="DispStateBox" style="width: 180px;height:200px;" size="8" 
			   onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
			   onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';" >
			 </select>
			 <cfset strStateList="" >
			 <cfloop query="selStateTbl">
			   <cfset strStateList=strStateList&",['#ChStateID#','#StateName#']" >
			 </cfloop>
			 <cfoutput>
			 <script>
			   var arrStates=[#Mid(strStateList,2,Len(strStateList))#];
			   document.forms.FRMAcc.TxtState.onkeyup();
			 </script>
			 </cfoutput>

Open in new window

The State filter input field is the same as in upper first comment.
0
 

Author Comment

by:lulu50
ID: 36546880
Zvonko

THANK YOU THANK YOU AND THANK YOU THIS IS BEAUTIFUL

GREAT!!!!!!!!!!!!!!!!!!!!!!

I LOVE IT !!!!!!  BEAUTIFUL !!!!!

THANK YOU

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Closing Comment

by:lulu50
ID: 36546882
A++++++++++++++

EXCELLENT +++++++++++++++
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36546906
You are welcome <|:-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36546962
Small note, add the onChange handler to the onFocus handler for State select:
<select name="DispStateBox" style="width: 180px;height:200px;" size="8" 
  onChange="setCityOptions(this,'TxtCity','GetCity','GetChurch');"
  onFocus="this.form.TxtCity.value='';this.form.TxtChurch.value='';this.onchange();" >
</select>

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now