Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to Filter the Scroll Menu based upon the Text in the textfield? 1

Status
Not open for further replies.
Vem786

Vem786

Technical User
Dec 2, 2003
52
0
0
US
Hi All:
I have a Textfield beneath it a Scroll Menu. When I type a letter OR a word, the Scroll Menu should sort itself & display the related data in it, so that I can select what I need.

For Example, I type "AT" in the Textfield, the Scroll Menu should sort itself & show up the data STARTING with "AT".

Any ideas!!!

Thanks in advance.
 
Sort by date Sort by votes
This dropdown doesn't sort itself, but everything else works. Why not just populate the list sorted in the first place? If that's not an option, dynamically sorting the list should be a piece of cake.

Code: 
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE=JavaScript>

function blahSmart(blah) {
   len = blah.length;
   size = blahForm.blahSelect.options.length;
   for (i = 0; i < size; i++) {
      if (blah == '') {
         blahForm.blahSelect.options[0].selected = true;
      }
      if (blah == blahForm.blahSelect.options[i].value.substring(0, len)) {
         blahForm.blahSelect.options[i].selected = true;
         return true;
      }
   }   
}

</SCRIPT>

<BODY>
<FORM NAME=&quot;blahForm&quot;>

<select name=&quot;blahSelect&quot;>
<option value=&quot;&quot; selected>Try Me Out</option>
<option value=&quot;ape&quot;>ape</option>
<option value=&quot;asp&quot;>asp</option>
<option value=&quot;bag&quot;>bag</option>
<option value=&quot;bat&quot;>bat</option>
<option value=&quot;cat&quot;>cat</option>
<option value=&quot;dawg&quot;>dawg</option>
<option value=&quot;dog&quot;>dog</option>
<option value=&quot;xxx&quot;>xxx</option>
<option value=&quot;yo&quot;>yo</option>
</select>
<br>
<input type=text name=blahText onkeyup='javascript:blahSmart(this.value)'>

</FORM>
</BODY>
</HTML>

-kaht

banghead.gif
 
Upvote 0 Downvote
My requirement is such that I should sort the Scroll Menu based upon the word OR letter typed in the textfield!!!

If I could get that worked, I'll be safe!!!

Any ideas???

Thanks!!!
 
Upvote 0 Downvote
Hi All:
I have one more thing to do on the Scroll Menu, Once I have the requested Data Sorted Up in the Scroll Menu based upon the word in the Textfield above it, I should show an option to SELECT MULTIPLE DATA in the Scroll Menu, to display it in the next page on submit.

Any help is appreciated!!!

Thanks Once Again!!
 
Upvote 0 Downvote
Vem,

I assume you can use JavaScript and do something like:

Code: 
document.forms['myFormName'].selectName.multiple = true;[code]

or

[code]document.forms['myFormName'].selectName.multiple = document.forms['myFormName'].myCheckBox.checked;[code] to be able to toggle the multiple feature from a checkbox.

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan:
But Why is the checkbox here in Multiple Select??

Thanks!!!
 
Upvote 0 Downvote
Vem,

>> &quot;should show an option to SELECT MULTIPLE DATA&quot;...

This is what the checkbox is for. You wanted a way to toggle between multiple selction and single selection, I assumed. The code I gave should do the job.

The checkbox isn't &quot;in multiple select&quot; - you can put it where you like as long as it is within the FORM tags.

You read the value of a checkbox via its &quot;checked&quot; property, which then sets the value of the select box's &quot;multiple&quot; property - so no, I did not mean &quot;selected&quot;.

Hope this clarifies the issue (was there one? ;o)

Dan
 
Upvote 0 Downvote
Hi Dan:
Sorry for being late in replying. I was off the machine for 2 days now!!!

Thanks for the clarification. Is there a way I can be directed to the solution for my problem.

The code kaht gave works fine. I did create TWO SCROLL MENUS beneath each of the TWO TEXTFIELDS. I select a data in the scrollmenu1 & in scrollmenu2 by enetering the first inital letters in th etextfields above(respectively). But when I delete the LETTERS that I typed in TEXTFIELDS 1 OR 2, the selected data in the scrollmenu gets changed & the FIRST data in the scrollmenu's are selected.

My problem here is:

1) How should I keep the selected data in EACH of the scrollmenu as is, EVEN when I delete the data in the textfields, not affecting the other?

2) how to populate this data in the next page when I hit submit?


Hope I'm not confusing anyone.

Here is the code thats giving me TOUGH Time!!! The JS code is exactly what I have been given by kaht.

-------------------------------------------
<HTML><HEAD>
</HEAD>
<BODY>
<TABLE cellSpacing=2 cellPadding=3 border=0>
<FORM name=form1>
<TR>
<TD align=left><INPUT name=text1></TD>
<TD align=left><INPUT name=text2></TD></TR>
<TR>
<TD align=left><SELECT size=4 name=select1> <OPTION
value=chuck>chuckle</OPTION> <OPTION value=check>check</OPTION> <OPTION
value=two>two</OPTION> <OPTION value=four>four</OPTION> <OPTION
value=six>six</OPTION> <OPTION value=eight>eight</OPTION> <OPTION
value=nine>nine</OPTION> <OPTION value=pop>pop</OPTION> <OPTION
value=rine>rine</OPTION> <OPTION
value=john>john</OPTION></SELECT></TD>
<TD align=left><SELECT size=4 name=select2> <OPTION
value=chuckle>chuckle</OPTION> <OPTION value=check>check</OPTION> <OPTION
value=two>two</OPTION> <OPTION value=four>four</OPTION> <OPTION
value=six>six</OPTION> <OPTION value=eight>eight</OPTION> <OPTION
value=nine>nine</OPTION> <OPTION value=pop>pop</OPTION> <OPTION
value=rine>rine</OPTION> <OPTION
value=john>john</OPTION></SELECT></TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
 
Upvote 0 Downvote
vem,

I've pieced together my checkbox code, your HTML code, and kaht's JavaScript code to produce this:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sortSelectBox(selectBoxName, sortText)
{
	var selectObj = eval(&quot;document.forms['form1'].&quot; + selectBoxName);
	var len = sortText.length;
	var size = selectObj.options.length;

	for (var i = 0; i < size; i++)
	{
		if (len > 0 && sortText == selectObj.options[i].value.substring(0, len))
		{
			selectObj.options[i].selected = true;
			return true;
		}
	}   
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME=&quot;form1&quot;>
<TABLE CELLSPACING=&quot;2&quot; CELLPADDING=&quot;3&quot; BORDER=&quot;0&quot;>
<TR>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;text&quot; NAME=&quot;text1&quot; onKeyUp=&quot;sortSelectBox('select1', this.value);&quot;></TD>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;text&quot; NAME=&quot;text2&quot; onKeyUp=&quot;sortSelectBox('select2', this.value);&quot;></TD>
</TR>
<TR>
	<TD ALIGN=&quot;left&quot;>
		<SELECT SIZE=&quot;4&quot; NAME=&quot;select1&quot;>
			<OPTION VALUE=&quot;chuck&quot;>chuckle</OPTION>
			<OPTION VALUE=&quot;check&quot;>check</OPTION>
			<OPTION VALUE=&quot;two&quot;>two</OPTION>
			<OPTION VALUE=&quot;four&quot;>four</OPTION>
			<OPTION VALUE=&quot;six&quot;>six</OPTION>
			<OPTION VALUE=&quot;eight&quot;>eight</OPTION>
			<OPTION VALUE=&quot;nine&quot;>nine</OPTION>
			<OPTION VALUE=&quot;pop&quot;>pop</OPTION>
			<OPTION VALUE=&quot;rine&quot;>rine</OPTION>
			<OPTION VALUE=&quot;john&quot;>john</OPTION>
		</SELECT>
	</TD>
    <TD ALIGN=&quot;left&quot;>
		<SELECT SIZE=&quot;4&quot; NAME=&quot;select2&quot;>
			<OPTION VALUE=&quot;chuckle&quot;>chuckle</OPTION>
			<OPTION VALUE=&quot;check&quot;>check</OPTION>
			<OPTION VALUE=&quot;two&quot;>two</OPTION>
			<OPTION VALUE=&quot;four&quot;>four</OPTION>
			<OPTION VALUE=&quot;six&quot;>six</OPTION>
			<OPTION VALUE=&quot;eight&quot;>eight</OPTION>
			<OPTION VALUE=&quot;nine&quot;>nine</OPTION>
			<OPTION VALUE=&quot;pop&quot;>pop</OPTION>
			<OPTION VALUE=&quot;rine&quot;>rine</OPTION>
			<OPTION VALUE=&quot;john&quot;>john</OPTION>
		</SELECT>
	</TD>
</TR>
<TR>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;check1&quot; onClick=&quot;document.forms['form1'].select1.multiple = this.checked;&quot;>Allow multiple</TD>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;check2&quot; onClick=&quot;document.forms['form1'].select2.multiple = this.checked;&quot;>Allow multiple</TD>
</TR>
<TR>
	<TD ALIGN=&quot;left&quot; COLSPAN=&quot;2&quot;><INPUT TYPE=&quot;submit&quot; VALUE=&quot;Submit this page&quot;></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

It seems to give you everything you've asked for:

- Select boxes that sort depending on the letter/word you type in

- The select boxes don't deselect if you delete the letter/word from the textbox

- The ability to allow multiple selection from the select boxes.

It seems that all you need top do now is create the next page in the chain - the page that this form data gets submitted to. I assume you'd be using some kind of server-side language (ASP, JSP, PHP, CFM, CGI, etc) to harvest the form data.

P.S. You'll excuse my use of eval instead of getElementById, only I don't know your target browser audience, and eval has wider compatibility for older browsers.

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan:
Thank You Very Much for the solution!!!

You made my day.

Finally, I have one last question........

I want to submit the Multiple Selection I made in the Select Boxes with the data that I have in a Textfield(1) on top of the page(NOT the one thats used for typing in letters/words, above the Select Box). Each Select Box is associated with a Textfield(1) above it. When I hit submit I should populate the next page with the data in Select Boxes PLUS the data in the textfield(1).

The page design is like this:

TEXTFIELD1

TEXTFIELD2(filter)

SELECTBOX

Any help is really appreciated!!

Thanks one & all!!!
 
Upvote 0 Downvote
Do you have access to any server-side scripting language, such as ASP, JSP, or PHP?

You'd really want to use one of those to retrieve the form data...

Dan
 
Upvote 0 Downvote
I guess I can use dcoument.writeln....to write off in the same page.

Is it not??
 
Upvote 0 Downvote
Vem,

If you want to use document.write, try this:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sortSelectBox(selectBoxName, sortText)
{
	var selectObj = eval(&quot;document.forms['form1'].&quot; + selectBoxName);
	var len = sortText.length;
	var size = selectObj.options.length;

	for (var i = 0; i < size; i++)
	{
		if (len > 0 && sortText == selectObj.options[i].value.substring(0, len))
		{
			selectObj.options[i].selected = true;
			return true;
		}
	}   
}

function replacePage()
{
	var htmlStr = &quot;&quot;;
	var formObj = document.forms['form1'];

	// text box 1 + select box 1
	htmlStr += &quot;Text 1: &quot; + formObj.other1.value + &quot;<BR>&quot;;
	htmlStr += &quot;Select 1: &quot;;
	for (var loop = 0; loop < formObj.select1.length; loop++)
	{
		if (formObj.select1.options[loop].selected) htmlStr += formObj.select1.options[loop].value + &quot; &quot;;
	}

	htmlStr += &quot;<HR>&quot;;

	// text box 2 + select box 2
	htmlStr += &quot;Text 2: &quot; + formObj.other2.value + &quot;<BR>&quot;;
	htmlStr += &quot;Select 2: &quot;;
	for (var loop = 0; loop < formObj.select2.length; loop++)
	{
		if (formObj.select2.options[loop].selected) htmlStr += formObj.select2.options[loop].value + &quot; &quot;;
	}

	document.open();
	document.write(htmlStr);
	document.close();
}

//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME=&quot;form1&quot;>
<TABLE CELLSPACING=&quot;2&quot; CELLPADDING=&quot;3&quot; BORDER=&quot;0&quot;>
<TR>
	<TD ALIGN=&quot;left&quot;>Text 1<BR><INPUT TYPE=&quot;text&quot; NAME=&quot;other1&quot;></TD>
	<TD ALIGN=&quot;left&quot;>Text 2<BR><INPUT TYPE=&quot;text&quot; NAME=&quot;other2&quot;></TD>
</TR>
<TR><TD ALIGN=&quot;left&quot; COLSPAN=&quot;2&quot;><HR></TD></TR>
<TR>
	<TD ALIGN=&quot;left&quot;>Filter 1<BR><INPUT TYPE=&quot;text&quot; NAME=&quot;text1&quot; onKeyUp=&quot;sortSelectBox('select1', this.value);&quot;></TD>
	<TD ALIGN=&quot;left&quot;>Filter 2<BR><INPUT TYPE=&quot;text&quot; NAME=&quot;text2&quot; onKeyUp=&quot;sortSelectBox('select2', this.value);&quot;></TD>
</TR>
<TR>
	<TD ALIGN=&quot;left&quot;>
		<SELECT SIZE=&quot;4&quot; NAME=&quot;select1&quot;>
			<OPTION VALUE=&quot;chuck&quot;>chuckle</OPTION>
			<OPTION VALUE=&quot;check&quot;>check</OPTION>
			<OPTION VALUE=&quot;two&quot;>two</OPTION>
			<OPTION VALUE=&quot;four&quot;>four</OPTION>
			<OPTION VALUE=&quot;six&quot;>six</OPTION>
			<OPTION VALUE=&quot;eight&quot;>eight</OPTION>
			<OPTION VALUE=&quot;nine&quot;>nine</OPTION>
			<OPTION VALUE=&quot;pop&quot;>pop</OPTION>
			<OPTION VALUE=&quot;rine&quot;>rine</OPTION>
			<OPTION VALUE=&quot;john&quot;>john</OPTION>
		</SELECT>
	</TD>
    <TD ALIGN=&quot;left&quot;>
		<SELECT SIZE=&quot;4&quot; NAME=&quot;select2&quot;>
			<OPTION VALUE=&quot;chuckle&quot;>chuckle</OPTION>
			<OPTION VALUE=&quot;check&quot;>check</OPTION>
			<OPTION VALUE=&quot;two&quot;>two</OPTION>
			<OPTION VALUE=&quot;four&quot;>four</OPTION>
			<OPTION VALUE=&quot;six&quot;>six</OPTION>
			<OPTION VALUE=&quot;eight&quot;>eight</OPTION>
			<OPTION VALUE=&quot;nine&quot;>nine</OPTION>
			<OPTION VALUE=&quot;pop&quot;>pop</OPTION>
			<OPTION VALUE=&quot;rine&quot;>rine</OPTION>
			<OPTION VALUE=&quot;john&quot;>john</OPTION>
		</SELECT>
	</TD>
</TR>
<TR>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;check1&quot; onClick=&quot;document.forms['form1'].select1.multiple = this.checked;&quot;>Allow multiple</TD>
	<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;check2&quot; onClick=&quot;document.forms['form1'].select2.multiple = this.checked;&quot;>Allow multiple</TD>
</TR>
<TR><TD ALIGN=&quot;left&quot; COLSPAN=&quot;2&quot;><HR></TD></TR>
<TR><TD ALIGN=&quot;left&quot; COLSPAN=&quot;2&quot;><INPUT TYPE=&quot;button&quot; VALUE=&quot;Next&quot; onClick=&quot;replacePage();&quot;></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Hope this helps!

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
129
trevil620
trevil620
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
138
coldbohemia
coldbohemia
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
176
Kennelbloke
Kennelbloke

Part and Inventory Search

Sponsor

Back
Top