HTML Help

fcp3net · Joined: 03 Apr 2006 Posts: 1

I've got a really interesting puzzle for all you DHTML gurus out there...

I'm trying to build a type-ahead menu. You begin typing in a person's last name, and the script should query an XML file, offering all last names, based on the user's input, i.e., user types in "sim" and receives a list of Simplan, Simpson, Simrey.

The way I have it now, I'm dumping the results into a SELECT in a FORM - all I want to do next is have each OPTION selected point directly to the person's records page, via their userID. I can set the OPTION value easily, I'm just not sure how to get it to go directly to the person's page.

Take a look:

function addEvent(elm, evType, fn, useCapture) {
// cross-browser event handling by Scott Andrew
// this is a generic function that will add event handlers
// correctly for various browsers (stock library)
// Copied via Stuart Landrige's new book...
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on'+evType, fn);
return r
}
else {
elm['on'+evType] = fn;
}
}

function init() {
//set up form to be interrupted on submit
var theform = document.getElementById('lookup');
addEvent(theform, 'submit', frmlkup, false);
var srchT = document.getElementById('lastnameSearch');
addEvent(srchT, 'keyup', frmlkup, false);
}

function frmlkup(e) {
//This function is called during the form submit event

var t = window.event ? window.event.srcElement : e ? e.target: null;
// alert('DEBUG: form interrupted');
var srchT = document.getElementById('lastnameSearch');
//alert(srchT.value);
if (srchT.value.length > 1) {
searchURL = "/xmlfind/template/indiv.xml?searchValue="+srchT.value;
lookupXML(searchURL);
} else {
var resultsInd = document.getElementById('resultsInd');
if (resultsInd) resultsInd.parentNode.removeChild(resultsInd);
}
if (window.event) window.event.returnValue = false;
if (e && e.preventDefault) e.preventDefault();
}

function lookupXML(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
// handle onreadystatechange event of req object
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// this is where you call your change script!!!
buildList();
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
function buildList() {
var indivs = req.responseXML.getElementsByTagName('indiv');
var str = '';
var resultsInd = document.getElementById('resultsInd')
if (resultsInd) {
results.parentNode.removeChild(resultsInd);
}
var resultsInd = document.createElement('form');
//h2 = document.createElement('h2');
//h2.appendChild(document.createTextNode('Search Results'));
//resultsInd.appendChild(h2);
//numline = document.createElement('p');
//numline.appendChild(document.createTextNode('Found '+indivs.length+' individuals'));
//resultsInd.appendChild(numline);
var selInd = document.createElement('select');
resultsInd.id = "resultsInd";
resultsInd.action = "formInd";
resultsInd.method = "POST";
for (var j = 0; j < indivs.length; j++) {
str = indivs[j].getAttribute("firstname")+' '+indivs[j].getAttribute("lastname");
optInd = document.createElement('option');
optInd.appendChild(document.createTextNode(str));
selInd.appendChild(optInd);
}
resultsInd.appendChild(selInd)
document.getElementById('lookup').parentNode.appendChild(resultsInd);
var formInd = document.getElementById("resultsInd").submit();
}

addEvent(window,'load',init,false);

THANKS IN ADVANCE!

kanenas · Joined: 14 Dec 2004 Posts: 193

How do you want to get to the records page? Submit the 'resultsInd' form? Click a link or button?

The most natural way of going about it is to use the natural properties of forms. Have the OPTIONs hold just userIDs for values and use the submission of the form to send the client to the appropriate page. Only if you can't pass the user ID to the records page via the query string do you need to do something fancy (with javascript, most likely).

Code:
<form name="lookup" method="GET" action="formInd">
<input name="lastnameSearch" size="32">
<select name="userID">
</select>
<button type="submit">Get user record</button>
</form>

<script type="text/javascript">
...
function buildList() {
var indivs = req.responseXML.getElementsByTagName('indiv');
var selInd = document.getElementById('lookup').userID;
for (var j = 0; j < indivs.length; j++) {
optInd = document.createElement('option');
optInd.appendChild(
document.createTextNode(
indivs[j].getAttribute("firstname")
+' '+indivs[j].getAttribute("lastname")
)
);
selInd.appendChild(optInd);
}
}
</script>

Submitting form lookup will redirect the client to (e.g.) "formInd?lastnameSearch=sim&userID=6871". If you don't want to include "lastnameSearch" in the URL (because it's ugly), separate the form into two static forms (there's no reason to dynamically create the "resultsInd" form, just the contents of the select).

Is this close to working for your situation?