Search for HTML page

[Frontman]

Hello all,

I am not certain if I should be asking here or with the HTML group.

I am interested in creating a simple html search box that will find specific HTML pages in a child folder one level (Folder "pages") and create a link.

More explaination:
Need to search for a number "001".
HTML pages that should be found are:
001-234524345.html
001-436452542.html
001-235345345.html

Is this a Javascript(able) solution?

Sincere regards for assistance.

 

[cLFlaVA]

javascript runs on the client machine.

you could possibly write some AJAX to do something like this, but not without the help of server-side code (asp, php, coldfusion, etc.). i suggest doing this search completely server-side.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

I also think this is more suited for the server-side.

If you wanted to do this kind of thing client-side, then javascript is totally appropriate (but be aware that if the user has javascript turned off, this solution won't work at all). One problem with this is the data you need to supply the javascript could easily get out of sync depending on how you manage it.

First some simple markup (I'm sure you can modify your own code to suit) to accomodate the search form and the results container (I'm using some ids here - this may cause problems if you already use the same ids):

<form action="" onsubmit="return false;">
	<label for="q">Search for:</label>
	<input name="q" id="q" type="text"/>
	<button onclick="search(this.form.elements['q'].value)">Search</button>
	<div id="searchResults">No results to display</div>
</form>

Note the div at the end? That's where we're going to put the results (or a nice message saying there were no results).

The supporting javascript data structure which you would have to maintain somehow - and this is where it becomes something more suited for server-side... but you could output this from a server-side include:

<script type="text/javascript">
/* for each file, create an entry in the results array */
var results = [];
results[results.length] = {
	fileName: '001-234524345.html',
	fileTitle: 'Acme Annual Report 2005',
	fileSearchWords: 'annual report' }

results[results.length] = {
	fileName: '001-436452542.html',
	fileTitle: 'Acme Financial Disclosures 2005 (b)',
	fileSearchWords: 'financial report disclosure' }

results[results.length] = {
	fileName: '001-235345345.html',
	fileTitle: 'Acme Directory 2005 (b)',
	fileSearchWords: 'directory' }

results[results.length] = {
	fileName: '002-235645315.html',
	fileTitle: 'Personnel Records 2005',
	fileSearchWords: 'personnel records' }
</script>

Then the actual search and display javascript functions that use the previous data to search the file name and the keywords fields:

<script type="text/javascript">
/* search through the results array using the value of data supplied
   > the fileName field is searched
   > the fileSearchWords fields is searched
   > supplying empty string (no data) returns all results
*/
function search(data) {
	var foundSet = [];
	for (var loop=0, max=results.length; loop<max; loop++) {
		if (results[loop].fileName.indexOf(data) > -1 ||
			results[loop].fileSearchWords.indexOf(data) > -1) {
			foundSet[foundSet.length] = results[loop];
		}
	}
	displaySearchResults(foundSet);
}

/* simple formatting to display the results */
function displaySearchResults(resultSet) {
	var html = '';
	for (var loop=0, max=resultSet.length; loop<max; loop++) {
		html += '<li>';
		html += '<span class="title">' + resultSet[loop].fileTitle + '</span>';
		html += '<span class="url"> (' + resultSet[loop].fileName + ')</span>';
		html += '</li>';
	}
	if (html == '') {
		html = 'No results to display';
	} else {
		html = '<ul class="searchResults">' + html + '</ul>';
	}
	document.getElementById('searchResults').innerHTML = html;
}
</script>

Just get the copy+paste going and make up a tiny template to test this... and it should make a little more sense.

I hope this helps.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094