Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

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

0
lulu50
Asked:
lulu50
  • 4
  • 2
1 Solution
 
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
 
ZvonkoSystems 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
 
lulu50Author Commented:
Zvonko

THANK YOU THANK YOU AND THANK YOU THIS IS BEAUTIFUL

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

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

THANK YOU

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now