2007 2019 Marco Papa Ellis Horowitz 39 Fifth Ajax Example Auto Completion

2007 2019 marco papa ellis horowitz 39 fifth ajax

This preview shows page 39 - 44 out of 55 pages.

© 2007-2019 Marco Papa & Ellis Horowitz 39 Fifth Ajax Example, Auto Completion <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html><head><title>My Fifth Ajax Script</title> <link rel="stylesheet" rev="stylesheet" href="script05.css" /> <script src="script05.js" type="text/javascript" language="Javascript"> </script> </head><body> <form action="#"> Please enter your state:<br /> <input type="text" id="searchField" autocomplete="off" /><br /> <div id="popups"> </div> </form></body></html> Initial screen Autocomplete attribute is set to off to prevent browsers from trying to autocomplete the field
Image of page 39
© 2007-2019 Marco Papa & Ellis Horowitz 40 The stylesheet body, #searchfield { font: 1.2em arial, helvetica, sans-serif; } .suggestions { background-color: #FFF; padding: 2px 6px; border: 1px solid #000; } .suggestions:hover { background-color: #69F; } #popups { position: absolute; } #searchField.error { background-color: #FFC; }
Image of page 40
© 2007-2019 Marco Papa & Ellis Horowitz 41 The JavaScript Source window.onload = initAll; var xhr = false; var statesArray = new Array(); function initAll() { document.getElementById("searchField").onkeyup = searchSuggest; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } }} if (xhr) { xhr.onreadystatechange = setStatesArray; xhr.open("GET", "us-states.xml", true); xhr.send(null); } else { alert("Sorry, but I couldn't create an XMLHttpRequest"); }} function setStatesArray() { if (xhr.readyState == 4) { if (xhr.status == 200) { if (xhr.responseXML) { var allStates = xhr.responseXML.getElementsByTagName("item"); for (var i=0; i<allStates.length; i++) { statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild; } } } else { alert("There was a problem with the request " + xhr.status); } } } Onkeyup captures single keystrokes The example uses the xml file listing the states Here we read the list of states and place them in an array
Image of page 41
© 2007-2019 Marco Papa & Ellis Horowitz 42 The JavaScript Source cont ± d function searchSuggest() { var str = document.getElementById("searchField").value; document.getElementById("searchField").className = ""; if (str != "") { document.getElementById("popups").innerHTML = ""; for (var i=0; i<statesArray.length; i++) { var thisState = statesArray[i].nodeValue; if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = thisState; tempDiv.onclick = makeChoice; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv); } } var foundCt = document.getElementById("popups").childNodes.length; if (foundCt == 0) { document.getElementById("searchField").className = "error"; } if (foundCt == 1) { document.getElementById("searchField").value = document.getElementById("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; } } } function makeChoice(evt) { var thisDiv = (evt) ? evt.target : window.event.srcElement; document.getElementById("searchField").value = thisDiv.innerHTML; document.getElementById("popups").innerHTML = ""; } This routine is called on a key up; The value in the search field is first extracted; if nothing is entered, do nothing; If indexof returns 0, then we have a hit; Add a state to the list of possibilities Foundct is the number of matches Unique hit, place it in proper place
Image of page 42
© 2007-2019 Marco Papa & Ellis Horowitz 43 Browser Output Initial screen 3 examples
Image of page 43
Image of page 44

You've reached the end of your free preview.

Want to read all 55 pages?

  • Fall '07
  • Papa
  • Ajax, Ellis Horowitz, Marco Papa

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture