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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Question Search a textarea for text

    I am creating a textarea with some text in it. Is there some kind of code I can throw in my html to make the search function search the textarea and highlight the word the person searches?

    <form>
    <center>
    <input type=text name="Search" size=20><input type="submit" value="Search">
    <p>
    <textarea name="Text" cols=40 rows=8>This is a test</textarea>
    </center>
    </form>

    for example, I would type in the word test in the search line and hit search and it would highlight the word in the textbox.

    Sorry about multiply posting of this question, but I put it in the wrong section.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>59825</title>
    		<script type="text/javascript">
    			function setSelectionRange(input, selectionStart, selectionEnd)
    			{
    				input.focus();
    				input.setSelectionRange(selectionStart, selectionEnd);
    			}
    			function selectString (input, string)
    			{
    				var match = new RegExp(string, "i").exec(input.value);
    				if (match)
    				{
    					setSelectionRange (input, match.index, match.index + match[0].length);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form action="" method="get" onsubmit="selectString(document.getElementById('text'), document.getElementById('search').value);return false;">
    			<fieldset>
    				<legend>Search text</legend>
    				<input id="search" name="search" type="text" size="20">
    				<input type="submit" value="search">
    			</fieldset>
    		</form>
    
    		<form action="" method="get">
    			<fieldset>
    				<legend>Text</legend>
    				<textarea id="text" name="text" cols="40" rows="8">This is a test</textarea>
    				<input type="submit">
    			</fieldset>
    		</form>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    wont work

    I may have made a mistake but I can not get it to work.

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    It only works in Mozilla and will only highlight the first match. From the other post. All you have to do is give your results div a set width using css.

    ex.
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title></title>
    		<style type="text/css">
    			.highlight
    			{
    				background-color:yellow;
    			}
    			#results
    			{
    				width:300px;
    			}
    		</style>
    		<script type="text/javascript">
    			function searchText()
    			{
    				var obj1=document.getElementById('srch_str');
    				var obj2=document.getElementById('txt');
    				
    				var str1=obj1.value;
    				var str2=obj2.value;
    				
    				var cut=str2.split(str1);
    				var len=cut.length;
    				var new_str="";
    				var last_len=0;
    				for(var i=0;i<len;i++)
    				{
    					if(i!=len-1)
    					{
    						new_str+=cut[i]+'<span class="highlight">'+str1+'</span>';
    					}
    					else
    					{
    						new_str+=cut[i];
    					}
    				}
    				if(len==1)
    				{
    					new_str="No Match Found!";
    				}
    				document.getElementById('results').innerHTML=new_str;
    			}
    		</script>
    	</head>
    	<body>
    		<form>
    			Search: <input type="text" id="srch_str" /> 
    			<input type="button" onclick="searchText()" />
    			<br />
    			<textarea cols="40" rows="5" id="txt">Hello all.  I am testing a search function. It is because of this that this text is here.
    			</textarea>
    		</form>
    		Results:
    		<div id="results">
    		</div>	
    	</body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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