...

View Full Version : Search a textarea for text



Vapor
05-26-2005, 02:01 AM
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.

hemebond
05-26-2005, 02:35 AM
<!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>

Vapor
05-26-2005, 02:38 AM
I may have made a mistake but I can not get it to work.

Basscyst
05-26-2005, 03:07 AM
It only works in Mozilla and will only highlight the first match. From the other post (http://www.codingforums.com/showthread.php?goto=newpost&t=59823). All you have to do is give your results div a set width using css.

ex.


<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum