<%@ Page Language="C#" %> <% // OrteLookup.aspx // A sample that is showing the integration of AJAX actions // and a field with LookUp functionality. // Copyright (c) by Matthias Hertel, http://www.mathertel.de // This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx // ----- // 18.11.2005 WebService function name changed. %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>LookUp Sample</title> <link href="/mathertel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/ajaxcore/ajax.js"></script> <script type="text/javascript" src="/ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S02_AJAXCoreSamples/OrteLookup.asmx"></script> </head> <body> <mh:Banner ID="Banner1" runat="server" /> <mh:Title runat="server" /> <a style="position: absolute; right: 32px; top: 10px" href="../ViewSrc.aspx">View Source</a> <p>A sample that is showing the integration of AJAX actions and a field with LookUp functionality.</p> <h2>City Lookup Field</h2> <input id="inputField" autocomplete="off" style="width: 200px;" /><img id="ddImg" src="/controls/images/Drop.gif" alt="toggle dropdown" onclick="toggleDropdown(this)" unselectable="on" class="INPUTFUNC"> <hr /> <p>This sample shows how to use an ajax action to build up a list of suggestions for the input value by filling a dropdown list.</p> <p>The city names that are filled into the dropdown list is fetched from the server through the <a href="../ViewSrc.aspx?file=/AJAXEngine/S02_AJAXCoreSamples/OrteLookup.asmx"> OrteLookup.asmx</a> web service.</p> <h3>LookUp sample using web controls</h3> <p>This sample is made to show how to use the AJAXEngine directly.</p> <p>A more advanced sample that uses web parts and JavaScript behaviors is available in another <a href="../S03_AJAXControls/LookupDemo.aspx"> LookUp sample page</a> at <a href="../S03_AJAXControls/LookupDemo.aspx">../S03_AJAXControls/LookupDemo.aspx</a>.</p> <script defer="defer" type="text/javascript"> // declare an AJAX action to the lookup service var LookupAction = { delay: 100, prepare: function() { return (document.getElementById("inputField").value); }, call: proxies.OrteLookup.GetPrefixedEntries, finish: function(val) { var fld = document.getElementById("inputField"); var dd = createDropdown(fld); FillDropdown(dd, val); if (window.navigator.userAgent.indexOf("MSIE") > 0) NextDropdownEntry(fld); }, onException: proxies.alertException } // LookupAction // ----- Dropdown box handling ----- // manipulation the selection works only in IE if (window.navigator.userAgent.indexOf("MSIE") > 0) document.getElementById("inputField").onkeydown = handleDown; document.getElementById("inputField").onkeyup = handleKey; document.getElementById("inputField").onblur = handleBlur; // set the focus right. document.getElementById("inputField").focus(); // extend the current selection if backspace (8) is pressed. function handleDown(evt) { var r = document.selection.createRange(); if (window.event.keyCode == 8) { r.moveStart("character", -1); r.select(); } // if } // handle all keyboard events for the dropdown list function handleKey(evt) { evt = evt || window.event; var t = evt.target || evt.srcElement; if (evt.keyCode == 40) { // down arrow if (t.dd == null) ajax.Start(LookupAction); else NextDropdownEntry(t); } else if (evt.keyCode == 38) { // up arrow if (t.dd == null) { // is already closed } else if (t.dd.selected == t.dd.firstChild) { RemoveDropdown(t); } else { PreviousDropdownEntry(t); } // if } else if ((evt.keyCode == 27) || (evt.keyCode == 13)) { // escape or return if (t.dd != null) RemoveDropdown(t); } else if ((evt.keyCode == 8) || (evt.keyCode >= 32)) { if ((t.typedText == null) || (t.typedText != t.value)) { t.typedText = t.value; ajax.Start(LookupAction); } // if } // if } // handleKey // close the dropdown list when leaving the field function handleBlur(evt) { evt = evt || window.event; var t = evt.target || evt.srcElement; RemoveDropdown(t); } // handleBlur function toggleDropdown(img) { var infield = img.previousSibling; if (infield.dd == null) ajax.Start(LookupAction); else RemoveDropdown(infield); } // toggleDropdown // Create a absolute positioned <div> element for the drop-down content // using a fields dimensions. // The created object is returned and is also attachet to the input field using the dd property. function createDropdown(infield) { var dd = infield.dd; var top, left; if (dd == null) { // create dropdown dd = document.createElement("div"); infield.parentNode.insertBefore(dd, infield); infield.dd = dd; dd.style.position = "absolute"; top = (infield.offsetTop + infield.offsetHeight); left = infield.offsetLeft; op = infield.offsetParent; while (op != null) { top += op.offsetTop; left += op.offsetLeft; op = op.offsetParent; } // while dd.style.top = top + "px"; dd.style.left = left + "px"; dd.style.width = (infield.clientWidth + infield.nextSibling.clientWidth) + "px"; dd.style.height = "200px"; dd.style.border = "solid 1px black"; dd.style.borderTop = "0px"; dd.style.backgroundColor = "#DDDDEE"; dd.style.overflowY = "scroll"; dd.style.display = "block"; } // if return (dd); } // createDropdown // Fill the dropdown list with new values. function FillDropdown(dd, options) { if (typeof (options) == "string") options = options.split(";"); // clear existing options while (dd.firstChild != null) dd.removeChild(dd.firstChild); if (options != null) { for (var n = 0; n < options.length; n++) { o = document.createElement("div"); o.innerText = options[n]; o.textContent = options[n]; dd.appendChild(o); } // for } // if dd.selected = null; } // FillDropdown // Remove the dropdown list function RemoveDropdown(infield) { var dd = infield.dd; if (dd != null) { dd.parentNode.removeChild(dd); infield.dd = null; } // if } // RemoveDropdown // Select the next entry in the dropdown list. function NextDropdownEntry(fld) { var dd = fld.dd; if (dd.selected == null) { dd.selected = dd.firstChild; } else if (dd.selected.nextSibling != null) { dd.selected.style.backgroundColor = "transparent"; dd.selected.style.color = "black"; dd.selected = dd.selected.nextSibling; } // if if (dd.selected != null) { dd.selected.style.backgroundColor = "black"; dd.selected.style.color = "white"; dd.selected.scrollIntoView(false); SetUntypedText(fld, dd.selected.textContent); } // if } // NextDropdownEntry // Select the previous entry in the dropdown list. function PreviousDropdownEntry(fld) { var dd = fld.dd; if (dd.selected.previousSibling != null) { dd.selected.style.backgroundColor = "transparent"; dd.selected.style.color = "black"; dd.selected = dd.selected.previousSibling; dd.selected.style.backgroundColor = "black"; dd.selected.style.color = "white"; dd.selected.scrollIntoView(true); SetUntypedText(fld, dd.selected.textContent); } // if } // PreviousDropdownEntry // Extend the text in the input field by some characters. // keep the typed text part unselected so typing is overriding the additional text. function SetUntypedText(fld, aText) { if (!(window.navigator.userAgent.indexOf("MSIE") > 0)) { fld.value = aText; } else { var tmp = fld.typedText; fld.value = aText; var r = fld.createTextRange(); if (tmp == null) { // select all } else if (tmp.toLowerCase() == aText.substr(0, tmp.length).toLowerCase()) { r.moveStart('character', tmp.length); } // if r.select(); } // if } // SetUntypedText // ----- End: Dropdown box handling ----- </script> <mh:Footer ID="foot" runat="server" /> </body> </html>
This page is part of the http://www.mathertel.de/ web site.
For updates and discussions see http://ajaxaspects.blogspot.com/.