Examples: Auto Suggest

Auto Suggest

Front End
Back End

<!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="https://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="https://ajaxref.com/ch8/ajaxtcr.js" type="text/javascript">

</script>

<script type="text/javascript">

 
 
var gSelectedIndex = -1;
 
/* key code constants */
var ENTER = 13;
var KEYUP = 38;
var KEYDOWN = 40;
 
 
function sendRequest(url, payload)
{
    var options = {method:"GET",
                     payload:payload,
                     onSuccess: handleResponse
                  };
                  
    AjaxTCR.comm.sendRequest(url, options);
}
 
 
function handleResponse(response)
{
    var suggestList = document.getElementById('suggestList')
    suggestList.innerHTML = "";
        
    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";
    
}
 
function getSuggestions(country)
{
    var url = "https://ajaxref.com/ch8/getcountry.php";
    var payload = "name=" + country.value;
    
    sendRequest(url, payload);
}
 
function checkKey(e, obj)
{
    var country = document.getElementById("country");
    
    /* get key pressed */
    var code = (e && e.which) ? e.which : window.event.keyCode;
    
    /* if up or down move thru the suggestion list */
    if (code == KEYDOWN || code == KEYUP)
    {
        var index = gSelectedIndex;
        if (code ==  KEYDOWN)
            index++;
        else
            index--;
 
       /* find item in suggestion list being looked at if any */
       var selectedItem = document.getElementById("resultlist" + index);
       if (selectedItem)
       {
           selectItem(selectedItem);
           country.value = selectedItem.innerHTML;
           /* set the field to the suggestion */
       }
    }
    else if (code == ENTER)  /* clear list if enter key */
        clearList();
    else if (country == obj) /* otherwise get more suggestions */
    {
        gSelectedIndex = -1;
        getSuggestions(obj);
    }
}
 
function selectItem(selectedItem) 
{
    var lastItem = document.getElementById("resultlist" + gSelectedIndex);
    if (lastItem != null)
        unselectItem(lastItem);
 
    selectedItem.className = 'suggestLinkOver';
    gSelectedIndex = parseInt(selectedItem.id.substring(10));
}
 
function unselectItem(selectedItem) 
{
    selectedItem.className = 'suggestLink';
}
 
function setCountry(value) 
{
    document.getElementById('country').value = value;
    clearList();
}
 
function checkClick(e)
{
    var target = ((e && e.target) ||(window && window.event && window.event.srcElement));
    var tag = target.tagName;
    if (tag.toLowerCase() != "input" && tag.toLowerCase() != "div")
        clearList();
}
 
function clearList()
{
    var suggestList = document.getElementById('suggestList');
    suggestList.innerHTML = '';
    suggestList.style.display = "none";
}
 
window.onload = function () 
{ 
  document.getElementById("suggestList").style.display = "none";
  document.getElementById("country").onkeyup = function(e){checkKey(e, this);};
  document.onclick = checkClick;
    
  /* kill default submit of a single field form */
  document.requestForm.onsubmit = function(){return false;};
};

</script>

 
</head>
<body>
<div class="content">
<h2>Auto Suggest</h2>
<form action="#" method="get" name="requestForm">
<label>Enter a Country:<br />
<input type="text" name="country" id="country" autocomplete="off" /><br />
<div id="suggestList"></div>
</label>
</form>
</div>
</body>
</html>