Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-10-2003, 05:35 PM   PM User | #1
Cattie
New to the CF scene

 
Join Date: Sep 2003
Location: The Netherlands
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Cattie is an unknown quantity at this point
Question problem with for loop and some other things

Hi everybody,

I read the sticky subjects, so I'll try to write this in my best english and get to the porblem right away.

Problem's
I put four *. in my script thats where the problems are!

*1 Here the script sould go back to the for loop with variable a and check the next letter of the word.
*2 Here the script sould go back to the for loop with variable i and check the next word form the array.
*3 If the word in the input box and the word in the array the script sould write
Code:
'<option value="' + i + '">' + words[i] + '</option>'
.
*4 When you click the submit button the select nemu loads in a new page. I want that when the page loads all the options are in the select box under the search box. And when you hit submit, there are less options to choose form.

What is the script supposed to do

It is a sort of search machine. When the page loads, it sould display a search field and under that all the possibilities (that are in the array) in a select menu. When you tipe something in the input box, the script sould compare this word with the words in the array and display only the words that combine. Example: I type in the input box TEA and the select box should now have the options Tea, Teapot, Teacup, Teabag, Teabiscuit and so on....

The script

Code:
<form name="searchform" onSubmit="return getSearchFiles(this)" action="none"><!-- *4 -->
<table>
	<tr>
		<td align=right>Search:</td>
		<td><input type="text" name="searchinput" size="30" value="jkhk"></td>
		<td><input type="submit" value="Submit"></td>
	</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
			function getSearchFiles(searchform) {
				words = new Array("Arresting", "Boatage", "Crescent", "Dynamics", "Eagle", "Flyaway", "Garrison", "Hautboy", "Indifferently", "Javelin", "Kickback", "Lovesick", "Marsupial", "Nectarine", "Overabundant", "Partnership", "Quotation", "Reply", "Selector", "Throat", "Undercut", "Vendor", "Watermelon", "Xerox", "Yabber", "Zenana", "Arres", "Boat", "Crest", "Dynam", "Eag", "Flya", "Garri", "Haut", "Indif", "Ja", "Kick", "Love", "Mars", "Nect", "Overab", "Partn", "Quot", "Re", "Select", "Thr", "Under", "Ven", "Water", "Xer", "Yab", "Zena")
				document.write ('<table><tr><td><select size="20">')
				words.sort()
				var inputNm = document.searchform.searchinput.value.toUpperCase()
				if (inputNm !="") {
					var lengthinput = inputNm.length
					for (var i = 0; i < words.length ; i++ ) {
						if (inputNm.lenght =< words[i].length) {
							for (var a = 0; a < inputNm.length ; a++ ) {
								var inputNum = inputNm.charCodeAt(a) - 65
								var varNm = words[i].toUpperCase()
								var varNum = varNm.charCodeAt(a) - 65
								if (inputNum == varNum) { /// *1 & *3
								} else {
								/// *2
								} 
							}
						}
					}
				} 
				for (var i = 0; i < words.length ; i++ ) {
					document.write ('<option value="' + i + '">' + words[i] + '</option>')
				}
				document.write ('</select></td></tr></table>')
				return false
			}
</script>
I did my best

Love Louise
Cattie is offline   Reply With Quote
Old 09-10-2003, 06:53 PM   PM User | #2
Danne
Regular Coder

 
Join Date: Aug 2002
Location: São Paulo, Brazil
Posts: 367
Thanks: 0
Thanked 0 Times in 0 Posts
Danne is an unknown quantity at this point
To make a search in Javascript is best done using regular expressions. As for not reloading the page on submit, is the answer not to use document.write. In the example below I used .innerHTML, but you can also use the DOM the build HTML-object dynamically.


Code:
<html>
<head>
<title>  </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<script>

function getSearchFiles(searchform, all) {
	words = new Array("Arresting", 
		"Boatage", 
		"Crescent",  
		"Dynamics",  
		"Eagle",  
		"Flyaway",  
		"Garrison",  
		"Hautboy",  
		"Indifferently",  
		"Javelin",  
		"Kickback",  
		"Lovesick",  
		"Marsupial",  
		"Nectarine",  
		"Overabundant",  
		"Partnership",  
		"Quotation",  
		"Reply",  
		"Selector",  
		"Throat",  
		"Undercut",  
		"Vendor",  
		"Watermelon",  
		"Xerox",  
		"Yabber",  
		"Zenana",  
		"Arres",  
		"Boat",  
		"Crest",  
		"Dynam",  
		"Eag",  
		"Flya",  
		"Garri",  
		"Haut",  
		"Indif",  
		"Ja",  
		"Kick",  
		"Love",  
		"Mars",  
		"Nect",  
		"Overab",  
		"Partn",  
		"Quot",  
		"Re",  
		"Select",  
		"Thr",  
		"Under",  
		"Ven",  
		"Water",  
		"Xer",  
		"Yab",  
		"Zena")
	var str='<table><tr><td><select size="20">';
	words.sort();
	var inputNm = document.searchform.searchinput.value.toUpperCase()
	if (inputNm !="") {
		var lengthinput = inputNm.length
		for (var i = 0; i < words.length ; i++ ) {
			if (words[i].search( new RegExp("^" + inputNm) ) > -1 || all) {
				str+='<option value="' + i + '">' + words[i] + '</option>';
			}
			//if (inputNm.lenght <= words[i].length) {
			//	for (var a = 0; a < inputNm.length ; a++ ) {
			//		var inputNum = inputNm.charCodeAt(a) - 65
			//		var varNm = words[i].toUpperCase()
			//		var varNum = varNm.charCodeAt(a) - 65
			//		if (inputNum == varNum) { /// *1 & *3
			//		} else {
			//		/// *2
			//		} 
			//	}
			//}
		}
	} 
	//for (var i = 0; i < words.length ; i++ ) {
	//	str+='<option value="' + i + '">' + words[i] + '</option>';
	//}
	str+='</select></td></tr></table>';
	document.getElementById("container").innerHTML=str;
	return false;
}
</script>
<body onload="getSearchFiles(document.forms['searchform'], true);">
<form name="searchform" onSubmit="return getSearchFiles(this);" action="none"><!-- *4 -->
<table>
	<tr>
		<td align=right>Search:</td>
		<td><input type="text" name="searchinput" size="30" value="jkhk"></td>
		<td><input type="submit" value="Submit"></td>
	</tr>
</table>
</form>
<div id="container"></div>
</body>
</html>
__________________
/Daniel
Danne is offline   Reply With Quote
Old 09-11-2003, 10:47 AM   PM User | #3
Cattie
New to the CF scene

 
Join Date: Sep 2003
Location: The Netherlands
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Cattie is an unknown quantity at this point
Smile

Thanx Daniel,

It works now, there is just one problem left.

When I type "t" in the search box it returns all the words that
start with a t.
But when I type "th" it doesn't return throat, it returns nothing at
all! Why is that?? I read the site about regular expressions but I coulden find the answer there.

Louise
Cattie is offline   Reply With Quote
Old 09-11-2003, 02:00 PM   PM User | #4
Danne
Regular Coder

 
Join Date: Aug 2002
Location: São Paulo, Brazil
Posts: 367
Thanks: 0
Thanked 0 Times in 0 Posts
Danne is an unknown quantity at this point
You're welcome...

I missed to make it case insensitive:
Code:
function getSearchFiles(searchform, all) {
    words = new Array("Arresting",
        "Boatage",
        "Crescent",
        "Dynamics",
        "Eagle",
        "Flyaway",
        "Garrison",
        "Hautboy",
        "Indifferently",
        "Javelin",
        "Kickback",
        "Lovesick",
        "Marsupial",
        "Nectarine",
        "Overabundant",
        "Partnership",
        "Quotation",
        "Reply",
        "Selector",
        "Throat",
        "Undercut",
        "Vendor",
        "Watermelon",
        "Xerox",
        "Yabber",
        "Zenana",
        "Arres",
        "Boat",
        "Crest",
        "Dynam",
        "Eag",
        "Flya",
        "Garri",
        "Haut",
        "Indif",
        "Ja",
        "Kick",
        "Love",
        "Mars",
        "Nect",
        "Overab",
        "Partn",
        "Quot",
        "Re",
        "Select",
        "Thr",
        "Under",
        "Ven",
        "Water",
        "Xer",
        "Yab",
        "Zena")
    var str='<table><tr><td><select size="20">';
    words.sort();
    var inputNm = document.searchform.searchinput.value.toUpperCase()
    if (inputNm !="") {
        var lengthinput = inputNm.length
        for (var i = 0; i < words.length ; i++ ) {
            if (words[i].toUpperCase().search( new RegExp("^" + inputNm) ) > -1 || all) {
                str+='<option value="' + i + '">' + words[i] + '</option>';
            }
            //if (inputNm.lenght <= words[i].length) {
            //    for (var a = 0; a < inputNm.length ; a++ ) {
            //        var inputNum = inputNm.charCodeAt(a) - 65
            //        var varNm = words[i].toUpperCase()
            //        var varNum = varNm.charCodeAt(a) - 65
            //        if (inputNum == varNum) { /// *1 & *3
            //        } else {
            //        /// *2
            //        } 
            //    }
            //}
        }
    } 
    //for (var i = 0; i < words.length ; i++ ) {
    //    str+='<option value="' + i + '">' + words[i] + '</option>';
    //}
    str+='</select></td></tr></table>';
    document.getElementById("container").innerHTML=str;
    return false;
}
__________________
/Daniel
Danne is offline   Reply With Quote
Old 09-11-2003, 02:57 PM   PM User | #5
Cattie
New to the CF scene

 
Join Date: Sep 2003
Location: The Netherlands
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Cattie is an unknown quantity at this point
Thanx again!

It completely works! I just included that when you type nothing in the box all the possibilities appear.

But youve been great help!!

Love Louise
Cattie is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:12 PM.


Advertisement
Log in to turn off these ads.