Highlight text as you type

Question

sw41 0 Newbie Poster

14 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 14 Years Ago Latest Post by infamousjre

All 6 Replies

itsjareds 29 Junior Poster

14 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.

itsjareds 29 Junior Poster

14 Years Ago

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.

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.

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-05-27T15:26:22+00:00

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>

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