Solved

Filter state

Posted on 2011-09-15
6
351 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

615 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