Solved

Filter state

Posted on 2011-09-15
6
329 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

773 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