Filter state

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

lulu50Asked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
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
 
ZvonkoSystems architectCommented:
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
 
lulu50Author Commented:
Zvonko

THANK YOU THANK YOU AND THANK YOU THIS IS BEAUTIFUL

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

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

THANK YOU

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
lulu50Author Commented:
A++++++++++++++

EXCELLENT +++++++++++++++
0
 
ZvonkoSystems architectCommented:
You are welcome <|:-)
0
 
ZvonkoSystems architectCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.