This is an extension to a previously asked and answered (well
answered, I might add) question regarding writing a javascript-enabled
webpage that would search hidden contents on the page and produce a
table of results. Really neat, but then again, I'm easily amused.
The original question, comments, history, and answer are here:
http://answers.google.com/answers/main?cmd=threadview&id=222748
It does not, however, work (offline) on a PocketPC, which is
ultimately where it would need to work. Below I've copied and pasted
two things: 1. A simple javascript HTML page that simply highlights
words on a page in red that works on a PPC (iPaq 3955 running 2002 OS,
thus proving that SOME form of Javascript will work). 2. The tweaked
version of what j_philipp-ga wrote up (I changed the item separator to
a comma from a semicolon, tweaked one cell width, and removed the
copyright). And, I've noted what it shows and does wrong on a PPC.
THE QUESION: Can someone make it work (correctly, as it does on a PC)
on a PPC? If so, you rock. If instead that's too risky (as it might
not ever work), then I'd probably reduce the Price a fair amount to
just have someone play around with it. It's not worth the full $150
to me if it won't work. Make sense? OK, see code as follows:
----------------------------
The Simple Javascript That Works on a PPC
----------------------------
<html><body>
JavaScript hilite demo -- Credit goes to a guy named Tim from a PPC
User Group<br>
<form method="get">
<input name="search" type="text"><input type="submit">
</form>
<script language='javascript'>
var tmp = document.location.href;
var search = '';
if (tmp.indexOf('search=') >= 0) {
tmp = tmp.substring(tmp.indexOf('search=')+'search='.length);
tmp = tmp.substring(0,(tmp.indexOf('&') > 0 ? tmp.indexOf('&') :
tmp.indexOf('#') > 0 ? tmp.indexOf('#') : tmp.length));
search = tmp.replace('+',' ');
}
var str = '';
str += '<p>\nIs there a plug in or upgrade (I\'ve looked and';
str += ' can\'t find any) for Pocket IE that would allow on';
str += 'e to search within a webpage for text, like you ca';
str += 'n in regular IE by doing a &ctr&F. \nWe coul';
str += 'd really use that functionality for searching for ';
str += 'information on our units. The webpages are all off';
str += '-line (on the actual iPaqs); perhaps there\'s some ';
str += 'way we can embed an internal search function in th';
str += 'e HTML??? \nI\'m not optimistic, but if anyone know';
str += 's of an upgrade or way to do this, it\'d be great. ';
str += '\nThanks! \nKen\n</p>\n';
str += '';
if (search) {
var strtmp = '';
while (""+strtmp != ""+str) {
strtmp = str;
str = str.replace(' '+search,' <font
color=red><i><b>'+search.substring(0,1)+'</b><b>'+search.substring(1)+'</b></i></font>');
}
}
document.write(str);
</script>
</body></html>
-------------------------------
2. This is the Code that I'd love to work on a PPC, but doesn't.
When inserted, here are the visual and functional issues:
a. after the "your query", it gives TWO input boxes, one above the
other
b. Before anything is entered, the "new search" link is shown
c. None of the 'hidden text' is hidden, it's all there as text on the
bottom.
d. when i put in a search item in the box (upper or lower or both),
and tap search, nothing happens; the text stays in the box, but the
rest of the rest of the page stays the same.
Here's the code:
--------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSV Search</title>
<style><!--
body
{
background-color: white;
color: black;
font-family: arial, helvetica, sans-serif;
}
/* The result-found highlight style for
a matching string, can be changed.
For example, you could give it a yellow
background-color (see comment).
*/
.hilite
{
color: red;
/* background-color: yellow; */
font-weight: bold;
}
/* Define column width;
Leave out specific column
for auto-sizing depending
on cell-contents:
*/
.column1
{
width: 100px;
}
.column2
{
width: 150px;
}
.column3
{
width: 150px;
}
table
{
border-collapse: collapse;
border: 1px solid black;
}
td
{
text-align: left;
vertical-align: top;
padding: 6px;
border: 1px solid black;
}
/* Two row background-colors
to seperate rows; can be changed:
*/
tr td
{
background-color: #eee;
}
tr.alternateRow td
{
background-color: #ccc;
}
#excel
{
display: none;
}
--></style>
<script type="text/javascript"><!--
// Row and column separator
// characters, can be changed:
var rowSeparator = "~";
var columnSeparator = ",";
var resultsI = 0;
function searchData()
{
var data = getData();
var search = document.getElementById("searchString").value;
var arrRows = data.split(rowSeparator);
var rowsLength = arrRows.length;
var s = "";
search = replaceStr(search, " ", " ");
var phraseSearch = ( search.indexOf("\"") >= 0 );
arrHeader = arrRows[0].split(columnSeparator);
headerLength = arrHeader.length;
header = "";
for (var i = 0; i < headerLength; i++)
{
header += "<th>" + arrHeader[i] + "</th>";
}
header = "<tr>" + header + "</tr>";
if (phraseSearch)
{
resultsI = 0;
search = replaceStr(search, "\"", "");
s += getMatchingRows(arrRows, search);
if (s != "")
{
s = "<p>" + resultsI +
" results found for phrase \"" +
search + "\":</p> " +
"<table>" + header + s + "</table>";
}
}
else
{
var searchWords = search.split(" ");
var wordsLength = searchWords.length;
for (var i = 0; i < wordsLength; i++)
{
resultsI = 0;
if (searchWords[i] != "")
{
var thisS = getMatchingRows(arrRows,
searchWords[i]);
if (thisS != "")
{
thisS = "<p>" + resultsI +
" results found for \"" +
searchWords[i] + "\":</p> " +
"<table>" + header + thisS + "</table>";
s += thisS;
}
}
}
}
if (resultsI < 1)
{
// No results output
s = "<p><em>No results matching \"" +
search + "\" were found.</em></p>";
}
var outputLayer = document.getElementById("dataOutput");
outputLayer.innerHTML = s;
document.getElementById("h1data").innerHTML = "Results";
searchForm.style.display = "none";
newSearchLink.style.display = "block";
}
function newSearch()
{
var outputLayer = document.getElementById("dataOutput");
outputLayer.innerHTML = "";
searchForm.style.display = "block";
newSearchLink.style.display = "none";
document.getElementById("h1data").innerHTML = "Search Data";
}
function getMatchingRows(arrRows, search)
{
var sRow = "";
var isAlternate = false;
var rowsLength = arrRows.length;
var lowSearch = search.toLowerCase();
for (var i = 1; i < rowsLength; i++)
{
var row = arrRows[i];
if ( row.toLowerCase().indexOf(lowSearch) >= 0 )
{
// Construct a table row with matches
// to display later:
var classString = (isAlternate) ?
" class=\"alternateRow\"" : "";
sRow += "<tr" + classString + ">";
arrColumns = row.split(columnSeparator);
var columnLength = arrColumns.length;
for (var j = 0; j < columnLength; j++)
{
var column = arrColumns[j];
sRow += "<td class=\"column" + (j + 1) + "\">";
var rowDisplay = replaceStr(column,
search,
"<span class=\"hilite\">" + search +
"</span>");
sRow += rowDisplay;
sRow += "</td>";
}
sRow += "</tr>";
isAlternate = !isAlternate;
resultsI++;
}
}
return sRow;
}
function getData()
{
var excelLayer = document.getElementById("excel");
return excelLayer.firstChild.data;
}
function replaceStr(str, oldStr, newStr)
{
regExp = new RegExp(oldStr, "gi");
results = str.replace(regExp, newStr);
return results;
}
// --></script>
</head>
<body>
<h1 id="h1data">Search Data</h1>
<form id="searchForm">
<p>
Your query:
<input type="text" size="20"
name="searchString" id="searchString" />
<input type="text" name="suppressReturn"
style="display: none;" />
<input type="button" onclick="searchData()"
value="Search" />
</p>
</form>
<div id="dataOutput">
</div>
<div id="newSearchLink" style="display: none;">
<p>[<a href="javascript:newSearch()">New search ...</a>]</p>
</div>
<div id="excel">
Owner,Position,Comments,Photo?
~Lawrence Welk,Singer,VIN #A23493839ki; Reg no: 74893gh6, no
~Julia Childs,Cook and Generally Annoying TV Personality, VIN#:
93823820j89383; Lic no 483820383B, yes
~Scooby Doo,Large Talking Dog, Mystery Machine VIN#: 89439292H8300,YES
~Gumby,Giant Green Guy,VIN#: Pokey,No
</div>
</body>
</html> |
