PART II
Chapter 8: User Interface Design for Ajax 381
var names = response.xhr.responseText.split("\n");
for(var i=0; i < names.length - 1; i++)
{
var suggestItem = document.createElement("div");
suggestItem.id = "resultlist" + i;
suggestItem.onmouseover = function(){selectItem(this);};
suggestItem.onmouseout = function(){unselectItem(this);};
suggestItem.onclick = function(){setCountry(this
.innerHTML);};
suggestItem.className = "suggestLink";
suggestItem.appendChild(document.createTextNode(names[i]));
suggestList.appendChild(suggestItem);
}
if (names.length > 1)
suggestList.style.display = "";
else
suggestList.style.display = "none";}This illustrates the general function of the code, as the rest of it primarily deals with
handling the visual changes in the suggestion lists and addresses some event details. We
present the complete code here for your inspection; it can be accessed online at http://
ajaxref.com/ch8/autosuggest.html.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 8 : User Interface - Auto Suggest</title>
<link rel="stylesheet" href="http://ajaxref.com/ch8/global.css" type="text/
css" media="screen" />
<style type="text/css">
.suggestLink { background-color: #FFFFFF;
padding: 2px 6px 2px 6px; }
.suggestLinkOver { background-color: #3366CC;
padding: 2px 6px 2px 6px; }
#suggestList { position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
border-top-width: 0px;
width: 160px; }
#wrapper { display: inline;}
#country { width: 160px; }
</style>
<script src="http://ajaxref.com/ch8/ajaxtcr.js" type="text/javascript">
</script>
<script type="text/javascript">
var gSelectedIndex = -1;
/* key code constants */