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).
sw41 0 Newbie Poster
itsjareds 29 Junior Poster
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.
sw41 0 Newbie Poster
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
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.
essential 84 Posting Shark Featured Poster
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
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
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> 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.