feedToList function

function feedToList(doc) {
  var title;
  var out = "";

  var items = doc.getElementsByTagName("item");
  for (var i = 0; i < items.length; i++) {
    title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
    out = out + "<li>" + title + "</li>";
  }
  return out;
}

• recall getElementsByTagName returns a collection
• expect only one title child of an item, so access 0'th member of collection
• recall nodeValue can only be applied to a text node

Google Suggest lookalike

• example taken from Dynamic AJAX Suggest Tutorial
• code for form above is:

  <form>
  <input type="text" id="txtSearch" name="txtSearch"
    onkeyup="searchSuggest();" autocomplete="off" />
  <div id="search_suggest">
  </div>
  </form>
  

• text box has id="txtSearch"
• searchSuggest() (next slide) is called in response to an onkeyup event
• autocomplete="off" turns off browser default to suggest recently entered data
• div with id="search_suggest" is where suggestions will appear

searchSuggest function

var searchReq = getXmlHttpRequestObject();

function searchSuggest() {
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  var str = escape(document.getElementById('txtSearch').value);
  searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
  searchReq.onreadystatechange = handleSearchSuggest;
  searchReq.send(null);
 }
}

• getXmlHttpRequestObject is similar to our earlier loadXMLHTTP function, but just returns an XMLHttpRequest object
• text box in form has id="txtSearch"
• note that calls to open are now asynchronous
• as a result, we must specify the function to call (handleSearchSuggest) when readyState changes
• values for readyState are:
  • 0 = uninitialised - open() has not yet been called
  • 1 = open - send() has not yet been called
  • 2 = sent - send() has been called, headers and status are available
  • 3 = receiving - downloading (not available in IE)
  • 4 = loaded - finished

searchSuggest.php

<?php
header("Content-Type: application/json; charset=utf-8");
...
$suggestions = array("Ajax","ASP","Javascript","JSP","XML","XPath","XSD","XSLT");
$result = array();

// Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
   $search = $_GET['search'];
   foreach ($suggestions as $suggestion) {
      // Add each suggestion to the $result array
      if (strpos($suggestion,$search)===0)
         $result[] = $suggestion;
   }
   echo json_encode($result);
}
?>

• foreach allows iteration through array
• strpos returns first position where second argument is found in first argument, or FALSE if not found
• since FALSE==0 is true in PHP, need to use strict comparison === to check types are equal too
• if value for $search matches $suggestion at 0'th position
  • add $suggestion to $result array
• output the $result array as JSON using json_encode

handleSearchSuggest function

//Called when the AJAX response is returned.
function handleSearchSuggest() {
 if (searchReq.readyState == 4) {
  var ss = document.getElementById('search_suggest');
  ss.innerHTML = '';
  var str = JSON.parse(searchReq.responseText); // PTW modified for JSON
  // For loop to build list of suggestions goes here (next slide)
 }
}

• div element under textbox in form has id="search_suggest"
• note the use of responseText since response is text (in JSON format)
• JSON.parse() parses JSON text, returning a JSON type
• for loop is on the next slide

handleSearchSuggest function (for loop)

...
  // Returned suggestions are in array str
  for(i=0; i < str.length; i++) {
   //Build our element string.  This is cleaner using the DOM,
   //but IE doesn't support dynamically added attributes.
   var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
   suggest += 'onmouseout="javascript:suggestOut(this);" ';
   suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
   suggest += 'class="suggest_link">' + str[i] + '</div>';
   ss.innerHTML += suggest;
  }
...

• each suggestion is output as a div element with mouseover, mouseout and onclick events
• suggestOver, suggestOut and setSearch are defined on next slide

Mouse over, mouse out and click functions

//Mouse over function
function suggestOver(div_value) {
  div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
  div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
  document.getElementById('txtSearch').value = value;
  document.getElementById('search_suggest').innerHTML = '';
}

• suggest_link_over is a CSS class value which highlights the suggestion
• suggest_link unhighlights the suggestion
• setSearch() enters the value in the search box and clears the suggestions
• all code is in ajax_search.js and the CSS file suggest.css

Exercise

• Combine the functionality of the Google Suggest lookalike with that for adding acronyms in order to achieve the following. When a user types into the textbox, the suggestions are retrieved from an XML file on the server, rather than being hardcoded into the program. Now add a button to the form which calls another program on the server which adds the word entered to the XML file if it is not already present.