Source Code

for file /AJAXEngine/S02_AJAXCoreSamples/OrteLookup.aspx

<%@ 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/.