Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2003
    Location
    The Netherlands
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Sep 2003
    Location
    The Netherlands
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Sep 2003
    Location
    The Netherlands
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •