/    Sign up×
Community /Pin to ProfileBookmark

Help with Searchable Directory

Copy linkTweet thisAlerts:
Dec 06.2005

Cany anybody direct me to some information about how to create a searchable directory? My client has a directory of businesses that she wants to be able to search by name or click alphabetical links that take you to all the businesses that start with a certain letter. It seemed like a pretty simple request until I sat down and tried to create it. Thanks in advance.

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Dec 06.2005 — Are they all on one page or on multiple pages?
Copy linkTweet thisAlerts:
@fhornedoauthorDec 06.2005 — They want the information on one page if possible.
Copy linkTweet thisAlerts:
@xtecltdDec 06.2005 — IF YOU USE THIS CODE YOU WILL BE ABLE TO TYPE IN THE NAME ECT

IT WILL ONLY SEARCH THE PAGE ITS PUT ON

<script>

<!-- Hide from old browsers

/******************************************

* Find In Page Script -- Submitted/revised by Alan Koontz ([email protected])

* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code

* This notice must stay intact for use

******************************************/

// revised by Alan Koontz -- May 2003

var TRange = null;

var dupeRange = null;

var TestRange = null;

var win = null;


// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT

// http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

var nom = navigator.appName.toLowerCase();

var agt = navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

var is_ie = (agt.indexOf("msie") != -1);

var is_ie4up = (is_ie && (is_major >= 4));

var is_not_moz = (agt.indexOf('netscape')!=-1)

var is_nav = (nom.indexOf('netscape')!=-1);

var is_nav4 = (is_nav && (is_major == 4));

var is_mac = (agt.indexOf("mac")!=-1);

var is_gecko = (agt.indexOf('gecko') != -1);

var is_opera = (agt.indexOf("opera") != -1);


// GECKO REVISION

var is_rev=0

if (is_gecko) {

temp = agt.split("rv:")

is_rev = parseFloat(temp[1])

}


// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH

// (SELF OR CHILD FRAME)

// If you want to search another frame, change from "self" to

// the name of the target frame:

// e.g., var frametosearch = 'main'

//var frametosearch = 'main';

var frametosearch = self;


function search(whichform, whichframe) {

// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)

if (is_ie4up && is_mac) return;

// TEST FOR NAV 6 (NO DOCUMENTATION)

if (is_gecko && (is_rev <1)) return;

// TEST FOR Opera (NO DOCUMENTATION)

if (is_opera) return;

// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES

if(whichform.findthis.value!=null && whichform.findthis.value!='') {

str = whichform.findthis.value;
win = whichframe;
var frameval=false;
if(win!=self)
{

frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];

}


}

else return; // i.e., no search string was entered

var strFound;

// NAVIGATOR 4 SPECIFIC CODE

if(is_nav4 && (is_minor < 5)) {

strFound=win.find(str); // case insensitive, forward search by default

// There are 3 arguments available:

// searchString: type string and it's the item to be searched

// caseSensitive: boolean -- is search case sensitive?

// backwards: boolean --should we also search backwards?

// strFound=win.find(str, false, false) is the explicit

// version of the above

// The Mac version of Nav4 has wrapAround, but

// cannot be specified in JS


}

// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)

if (is_gecko && (is_rev >= 1)) {

if(frameval!=false) win.focus(); // force search in specified child frame
strFound=win.find(str, false, false, true, false, frameval, false);

// The following statement enables reversion of focus

// back to the search box after each search event

// allowing the user to press the ENTER key instead

// of clicking the search button to continue search.

// Note: tends to be buggy in Mozilla as of 1.3.1

// (see www.mozilla.org) so is excluded from users

// of that browser.

if (is_not_moz) whichform.findthis.focus();

// There are 7 arguments available:

// searchString: type string and it's the item to be searched

// caseSensitive: boolean -- is search case sensitive?

// backwards: boolean --should we also search backwards?

// wrapAround: boolean -- should we wrap the search?

// wholeWord: boolean: should we search only for whole words

// searchInFrames: boolean -- should we search in frames?

// showDialog: boolean -- should we show the Find Dialog?


}

if (is_ie4up) {

// EXPLORER-SPECIFIC CODE revised 5/21/03

if (TRange!=null) {

TestRange=win.document.body.createTextRange();



if (dupeRange.inRange(TestRange)) {

TRange.collapse(false);

strFound=TRange.findText(str);

if (strFound) {

//the following line added by Mike and Susan Keenan, 7 June 2003

win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;

TRange.select();

}


}

else {

TRange=win.document.body.createTextRange();
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}



}

}

if (TRange==null || strFound==0) {

TRange=win.document.body.createTextRange();

dupeRange = TRange.duplicate();

strFound=TRange.findText(str);

if (strFound) {

//the following line added by Mike and Susan Keenan, 7 June 2003

win.document.body.scrollTop = TRange.offsetTop;

TRange.select();

}


}

}

if (!strFound) alert ("String '"+str+"' not found!") // string not found


}

// -->

</script>

<!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) -->

<form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>
Copy linkTweet thisAlerts:
@fhornedoauthorDec 07.2005 — Thanks!
Copy linkTweet thisAlerts:
@ray326Dec 07.2005 — Since it's one page, the simplest way would be to use the browser page search (Ctrl-f) to find names and an alpha link list across the top of the page to jump to the start of sections. Zero code and no Javascript dependency.
×

Success!

Help @fhornedo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...