J
JSrookie
Hi all,
I'm trying to implement autocomplete feature in javascript (like google
suggest). I've gotten as far as showing the list autocomplete words.
I'am at the point where if a user clicks on word, it has to be
populated into the text field with the dropdown box disappearing. I'm
stuck here and confused as to how to implement it. I'm getting the list
of words via AJAX without doing any XML stuff (i.e the backend simply
gives a string to the handler function and this function splits the
words and shows).
Can you suggest on how to go about this?
code follows from here
---------------------------------
<html>
<head>
<style type="text/css">
..mouseOver {
background: #FFFFFF;
color: #000000;
}
..mouseOut {
background: #CCCC99;
color: #000000;
}
</style>
<script type="text/javascript">
var isIE;
var req;
var names;
var target;
function getElementY(element){
var targetTop = 0;
if (element.offsetParent) {
while (element.offsetParent) {
targetTop += element.offsetTop;
element = element.offsetParent;
}
} else if (element.y) {
targetTop += element.y;
}
return targetTop;
}
function init() {
target = document.getElementById("complete-field");
var menu = document.getElementById("auto-row");
var autorow = document.getElementById("menu-popup");
autorow.style.top = getElementY(menu) + "px";
}
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function doCompletion() {
initRequest();
req.onreadystatechange = processRequest;
req.open("POST", "<URL>", true);
req.send(id=escape(target.value));
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessages();
} else if (req.status == 204){
alert("clearing table");
clearTable();
}
}
}
function parseMessages() {
if (!names) names = document.getElementById("names");
clearTable();
var lbls = req.responseText;
var labels=lbls.split("=");
for (loop = 0; loop < labels.length; loop++) {
var label = labels[loop];
appendLabel(labels[loop]);
}
}
function clearTable() {
if (names) {
for (loop = names.childNodes.length -1; loop >= 0 ; loop--) {
names.removeChild(names.childNodes[loop]);
}
}
}
function appendLabel(label) {
if (isIE) {
row = names.insertRow(names.rows.length);
nameCell = row.insertCell(0);
} else {
row = document.createElement("tr");
nameCell = document.createElement("td");
row.appendChild(nameCell);
names.appendChild(row);
}
nameCell.setAttribute("onmouseout", "this.className='mouseOver';");
nameCell.setAttribute("onmouseover", "this.className='mouseOut';");
nameCell.setAttribute("bgcolor", "#FFFAFA");
document.getElementById("complete-field").value=null;
var nameFontElement = document.createElement("font");
nameFontElement.setAttribute("size", "-1");
nameFontElement.setAttribute("color", "black");
nameFontElement.appendChild(document.createTextNode(label));
nameCell.appendChild(nameFontElement);
}
</script>
</head>
<body onload="init()">
<form name="autofillform" action="autocomplete" method="get">
<input type="hidden" name="action" value="lookupbyname"/>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><b>Label Name:</b></td>
<td>
<input type="text" size="20" id="complete-field" name="id"
onkeyup="doCompletion();">
</td>
<td align="left">
<input id="submit_btn" type="Submit" value="Lookup Label">
</td>
</tr>
<tr><td id="auto-row" colspan="2"> <td/></tr>
</table>
</form>
<div style="position: absolute; top:170px;left:110px" id="menu-popup">
<table id="names"
bgcolor="#FFFAFA"
border="0"/>
</div>
</body>
</html>
I'm trying to implement autocomplete feature in javascript (like google
suggest). I've gotten as far as showing the list autocomplete words.
I'am at the point where if a user clicks on word, it has to be
populated into the text field with the dropdown box disappearing. I'm
stuck here and confused as to how to implement it. I'm getting the list
of words via AJAX without doing any XML stuff (i.e the backend simply
gives a string to the handler function and this function splits the
words and shows).
Can you suggest on how to go about this?
code follows from here
---------------------------------
<html>
<head>
<style type="text/css">
..mouseOver {
background: #FFFFFF;
color: #000000;
}
..mouseOut {
background: #CCCC99;
color: #000000;
}
</style>
<script type="text/javascript">
var isIE;
var req;
var names;
var target;
function getElementY(element){
var targetTop = 0;
if (element.offsetParent) {
while (element.offsetParent) {
targetTop += element.offsetTop;
element = element.offsetParent;
}
} else if (element.y) {
targetTop += element.y;
}
return targetTop;
}
function init() {
target = document.getElementById("complete-field");
var menu = document.getElementById("auto-row");
var autorow = document.getElementById("menu-popup");
autorow.style.top = getElementY(menu) + "px";
}
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function doCompletion() {
initRequest();
req.onreadystatechange = processRequest;
req.open("POST", "<URL>", true);
req.send(id=escape(target.value));
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessages();
} else if (req.status == 204){
alert("clearing table");
clearTable();
}
}
}
function parseMessages() {
if (!names) names = document.getElementById("names");
clearTable();
var lbls = req.responseText;
var labels=lbls.split("=");
for (loop = 0; loop < labels.length; loop++) {
var label = labels[loop];
appendLabel(labels[loop]);
}
}
function clearTable() {
if (names) {
for (loop = names.childNodes.length -1; loop >= 0 ; loop--) {
names.removeChild(names.childNodes[loop]);
}
}
}
function appendLabel(label) {
if (isIE) {
row = names.insertRow(names.rows.length);
nameCell = row.insertCell(0);
} else {
row = document.createElement("tr");
nameCell = document.createElement("td");
row.appendChild(nameCell);
names.appendChild(row);
}
nameCell.setAttribute("onmouseout", "this.className='mouseOver';");
nameCell.setAttribute("onmouseover", "this.className='mouseOut';");
nameCell.setAttribute("bgcolor", "#FFFAFA");
document.getElementById("complete-field").value=null;
var nameFontElement = document.createElement("font");
nameFontElement.setAttribute("size", "-1");
nameFontElement.setAttribute("color", "black");
nameFontElement.appendChild(document.createTextNode(label));
nameCell.appendChild(nameFontElement);
}
</script>
</head>
<body onload="init()">
<form name="autofillform" action="autocomplete" method="get">
<input type="hidden" name="action" value="lookupbyname"/>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><b>Label Name:</b></td>
<td>
<input type="text" size="20" id="complete-field" name="id"
onkeyup="doCompletion();">
</td>
<td align="left">
<input id="submit_btn" type="Submit" value="Lookup Label">
</td>
</tr>
<tr><td id="auto-row" colspan="2"> <td/></tr>
</table>
</form>
<div style="position: absolute; top:170px;left:110px" id="menu-popup">
<table id="names"
bgcolor="#FFFAFA"
border="0"/>
</div>
</body>
</html>