Highlight text as you type

Question

sw41 0 Newbie Poster

16 Years Ago

I have a list of 400+ names I am getting from a mysql database. They are listed out in a table. I would like to have a text box where once you start typing, the string highlights below, the more I type the less matches come about (will and william for example).

javascript

4 Contributors
6 Replies
1K Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by infamousjre

All 6 Replies

itsjareds 29 Junior Poster

16 Years Ago

So basically, you're asking for something similar to Google autosuggest, except with names?

Try this:

<html>
<body>
<script type="text/javascript">
function suggest(e, o) {
	var suggestDiv = document.getElementById('suggest');
	var namesList = new Array();
		namesList.push("Will");
		namesList.push("Bob");
		namesList.push("Joe");
		namesList.push("William");
		namesList.push("Jared");
	var suggest = new Array();
	var i;
	var keychar = "";

	// Get the key entered
	if (window.event)
		keynum = e.keyCode;
	else if (e.which)
		keynum = e.which;
	else
		return false;
	if (keynum > 46) // Does not look for backspace, enter, etc-
		keychar = String.fromCharCode(keynum);
	if (keynum > 46 || keynum == 8)
		suggestDiv.innerHTML = "";

	var searchText = (keynum == 8) ? o.value.substr(0, o.value.length-1) : o.value + keychar;

	if (searchText != "") {
		var input = new RegExp("^" + searchText, "i");

		for (i=0; i<namesList.length; i++) {
			if (input.test(namesList[i]))
				suggest.push(namesList[i]);
		}
		if (suggest.length > 0) {
			suggest.sort();
			for (i=0; i<suggest.length; i++) {
				suggestDiv.innerHTML += "<span>" + suggest[i] + "</span><br/>\n";
			}
		}
	}
}
</script>

<form>
Type a name:
<input type="text" onkeypress="suggest(event, this);"/>
</form>

<div id="suggest"></div>

</body>
</html>

Just change the names array dynamically to what your names array is, and it should work.

essential 84 Posting Shark

16 Years Ago

Im not sure if this is what you exactly need! But i hope this will help

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */

html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

  table {
  border-collapse;
  margin : 1em auto 0 auto;
  padding : 0;
  text-align : left;
  width : 100%; }

  td, th {
  border-top : 1px solid;
  font : normal normal normal 12pt Verdana, Arial, sans-serif;
  border-bottom : 1px solid;
  white-space : pre;
  vertical-align : middle;
  padding : .300em 1em .300em 1em; }

input#words {
  display : block;
  min-height : 22px;
  border : 1px solid;
  width : 100%; }

div#output {
  background-color : #fff;
  border : 1px solid;
  padding : 1em;
  line-height : 2.5ex;
  letter-spacing : 1px;
  white-space : pre;
}
/* ]]> */
</style>
<script type="text/javascript">
<!--

var highlight;
var viaID;
   viaID = Boolean( document.getElementById );
   highlight = function( key ) {
   key = (( viaID ) ? document.getElementById( key ) : (( document.all ) ? document.all[ key ] : document.layers[ key ] )).value;

   if ( key.length <= 0 ) { return }
   word = (( viaID ) ? document.getElementById( "output" ) : (( document.all ) ? document.all[ "output" ] : document.layers[ "output" ] ));

   findWord = new RegExp( key, "g" );

   word.innerHTML = word.innerText.replace( findWord, "<span style=\u0022background-color : #f80; color : #fff; padding : .100em .300em .100em .300em;\u0022>" + key + "</span>" );
  };
// -->
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Javascript Live Demo!</h2>
<table id="test" frame="void" rules="none" summary="Highlight Words DEMO">
<tr>
<td colspan="2"><div id="output">William
Amanda
William
Amy
William
Brian
William
Bryan
William
Jason
William
Jeff
William
John
William</div></td>
</tr>
<tr><td style="width : 70%; text-align: center"><input type="text"  id="words" onkeyup="highlight(this.id);" value="" /></td><td style="text-align : center;"><input type="reset" value="Reset" /></tr>
</table>
</div>
</div>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sw41 0 Newbie Poster · Answer 1 · 2009-05-27T04:14:44+00:00

Not so much the google auto suggest (that does help me with a different problem so thanks for that!!). More like ctrl-F in firefox where you start typing and the text on the screen "reacts" to what you are typing. I would want the text in my table to "react" to what you are typing. If William is trying to figure out which team he is on (and ctrl-F is too complicated for them), then he could start to spell his name in the "find name box" and they would get highlighted in the list below.

Find Name: will (user is typing this in)
Names - Team
Bill - Team 1
Jill - Team 2
Mcwillzen - Team 1
Wally - Team 3
Will - Team 1
William -Team 2
Wilson - Team 3
Wilt - Team 2

Find Name: willi (user is typing this in)
Names - Team
Bill - Team 1
Jill - Team 2
Mcwillzen - Team 1
Wally - Team 3
Will - Team 1
William - Team 2
Wilson - Team 3
Wilt - Team 2

A bonus side effect of this would be if I typed in Team 1 and saw who was all on team 1 in the 400 name list.

itsjareds 29 Junior Poster · Answer 2 · 2009-05-27T06:51:46+00:00

Hmm, try using this script as a guide:

http://4umi.com/web/javascript/hilite.php

Except clear the results, then call it again on each keypress.

infamousjre 0 Newbie Poster · Answer 3 · 2009-06-05T16:58:37+00:00

I found this thread in a google search because I'm trying to do the same thing! I've been looking at this thread for a few days and just now realized that it is only 9 days old.

I'm getting a list back from a database, and to make comparison easier, I want the user to be able to type in a text box what they are looking for on the page. This will in turn highlight the text with a span tag.

Here's what I got so far... I'm close, but not quite there yet. if you get any further with this, help me out.

function changeText(){
	var searchArea = document.getElementById('main').innerHTML;
	var contentArea = document.getElementById('main').innerHTML;
	var searchText = document.myForm.myField.value;

	if(searchArea.search(searchText)>=0 && document.myForm.myField.value != ""){
		var contentBeginning = contentArea.substring(0,searchArea.search(searchText));
		var	contentEnding = 	contentArea.substring(searchArea.search(searchText)+searchText.size,
							searchArea.search(searchText)+searchText.size+22
							);
		contentArea = 
					contentBeginning
					+
					"<span class='highlight'>"
					+
					document.myForm.myField.value
					+
					"</span>"
					+
					contentEnding;

			document.getElementById('main').innerHTML = contentArea;
	}
}

<form name="myForm" id="myForm">
	<input type="text" name="myField" id="myField" onkeyup="changeText();"></input>
</form>
		
<div id="main">Hello</div>

infamousjre 0 Newbie Poster · Answer 4 · 2009-06-05T18:30:42+00:00

I think I figured it out! :-)

Only problem I see is that it doesn't ignore HTML so when you type "b" "<br>" will show up highlighted

<html>
<head>
	<title>innerHTML</title>
	<style type="text/css">
		<!--
		span.highlight {
		  background-color: #FFFFFF;
		  font-color: #FF0000;
		  font-weight: bold;
		}
		-->
	;</style>
	<script type="text/javascript">

	
	function changeText(){
		var searchArea = document.getElementById('main').innerHTML;
		var contentArea = document.getElementById('main').innerHTML;

		if(searchArea.search(searchText)>=0 && document.myForm.myField.value != ""){

			var locationOf = searchArea.search(searchText);
			var contentBeginning = contentArea.substring(0,locationOf);
			var	contentEnding = onLoadContent.substring(locationOf+searchText.length,99999999);
			
				contentArea = 
						contentBeginning
					+
						"<span class='highlight'>"
					+
						searchText
					+
						"</span>"
					+
						contentEnding;

				document.getElementById('main').innerHTML = contentArea;
		}
	}

	function resetText(){
		document.getElementById('main').innerHTML = onLoadContent;
	}

	function setSearchText(){
		searchText = document.myForm.myField.value;
	}

	</script>
</head>
<body>

			<form name="myForm" id="myForm">
				<input type="text" name="myField" id="myField" onkeyup="resetText();setSearchText();changeText();"></input>
				<input type="button" value="Reset" onclick="resetText();"></input>
			</form>
			
			<div id="main">Hello<br/>Goodbye
			</div>

	<script type="text/javascript">
		var onLoadContent = document.getElementById('main').innerHTML;
		var searchText = document.myForm.myField.value;
	</script>
</body>
</html>

Highlight text as you type

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers