suggest.js

AJAX and PHP: Building Responsive Web Applications源代码

      crtFunction = oCache[keyword][i];
      // set the string link for the for the current function 
      // to the name of the function
      crtFunctionLink = crtFunction;
      // replace the _ with - in the string link
      while(crtFunctionLink.indexOf("_") !=-1)
        crtFunctionLink = crtFunctionLink.replace("_","-");
      // start building the HTML row that contains the link to the 
      // PHP help page of the current function
 
      div += "<tr id='tr" + i + 
             "' onclick='location.href=document.getElementById(\"a" + i + 
             "\").href;' onmouseover='handleOnMouseOver(this);' " + 
             "onmouseout='handleOnMouseOut(this);'>" + 
             "<td align='left'><a id='a" + i + 
             "' href='" + phpHelpUrl + crtFunctionLink + ".php";
      // check to see if the current function name length exceeds the maximum 
      // number of characters that can be displayed for a function name
      if(crtFunction.length <= suggestionMaxLength)
      {
        // bold the matching prefix of the function name and of the keyword
        div += "'><b>" + 
               crtFunction.substring(0, httpRequestKeyword.length) + 
               "</b>"
        div += crtFunction.substring(httpRequestKeyword.length, 
                                     crtFunction.length) + 
               "</a></td></tr>";
      }
      else
      {
        // check to see if the length of the current keyword exceeds 
        // the maximum number of characters that can be displayed
        if(httpRequestKeyword.length < suggestionMaxLength)
        {
          /* bold the matching prefix of the function name and that of the 
             keyword */
          div += "'><b>" + 
                 crtFunction.substring(0, httpRequestKeyword.length) + 
                 "</b>"
          div += crtFunction.substring(httpRequestKeyword.length,
                                       suggestionMaxLength) + 
                 "</a></td></tr>";   
        }
        else
        {
          // bold the entire function name
          div += "'><b>" + 
                 crtFunction.substring(0,suggestionMaxLength) + 
                 "</b></td></tr>"          
        }
      }
    }
  }
  // end building the HTML table
  div += "</table>";
  // retrieve the suggest and scroll object
  var oSuggest = document.getElementById("suggest");  
  var oScroll = document.getElementById("scroll");
  // scroll to the top of the list
  oScroll.scrollTop = 0;
  // update the suggestions list and make it visible
  oSuggest.innerHTML = div;
  oScroll.style.visibility = "visible";
  // if we had results we apply the type ahead for the current keyword
  if(results_array.length > 0)
    autocompleteKeyword();      
}

/* function that periodically checks to see if the typed keyword has changed */
function checkForChanges()
{
  // retrieve the keyword object
 
  var keyword = document.getElementById("keyword").value;
  // check to see if the keyword is empty
  if(keyword == "")
  {
    // hide the suggestions
    hideSuggestions();
    // reset the keywords 
    userKeyword="";
    httpRequestKeyword="";
  }
  // set the timer for a new check 
  setTimeout("checkForChanges()", 500);
  // check to see if there are any changes
  if((userKeyword != keyword) && 
     (autocompletedKeyword != keyword) && 
     (!isKeyUpDownPressed))
    // update the suggestions
    getSuggestions(keyword);
}

/* function that handles the keys that are pressed */
function handleKeyUp(e) 
{
  // get the event
  e = (!e) ? window.event : e;
  // get the event's target
  target = (!e.target) ? e.srcElement : e.target;
  if (target.nodeType == 3) 
    target = target.parentNode;
  // get the character code of the pressed button
  code = (e.charCode) ? e.charCode :
       ((e.keyCode) ? e.keyCode :
       ((e.which) ? e.which : 0));
  // check to see if the event was keyup
  if (e.type == "keyup") 
  {    
    isKeyUpDownPressed =false; 
    // check to see we if are interested in the current character
    if ((code < 13 && code != 8) || 
        (code >=14 && code < 32) || 
        (code >= 33 && code <= 46 && code != 38 && code != 40) || 
        (code >= 112 && code <= 123)) 
    {
      // simply ignore non-interesting characters
    }
    else
    /* if Enter is pressed we jump to the PHP help page of the current 
       function */
    if(code == 13)
    {
      // check to see if any function is currently selected
      if(position>=0)
      {
        location.href = document.getElementById("a" + position).href;
      }        
    }        
    else
    // if the down arrow is pressed we go to the next suggestion
      if(code == 40)
      {                   
        newTR=document.getElementById("tr"+(++position));
        oldTR=document.getElementById("tr"+(--position));
        // deselect the old selected suggestion   
        if(position>=0 && position<suggestions-1)
          oldTR.className = "";
 
        // select the new suggestion and update the keyword
        if(position < suggestions - 1)
        {
          newTR.className = "highlightrow";
          updateKeywordValue(newTR);
          position++;         
        }     
        e.cancelBubble = true;
        e.returnValue = false;
        isKeyUpDownPressed = true;        
        // scroll down if the current window is no longer valid
        if(position > maxVisiblePosition)
        {   
          oScroll = document.getElementById("scroll");
          oScroll.scrollTop += 18;
          maxVisiblePosition += 1;
          minVisiblePosition += 1;
        }
      }
      else
      // if the up arrow is pressed we go to the previous suggestion
      if(code == 38)
      {       
        newTR=document.getElementById("tr"+(--position));
        oldTR=document.getElementById("tr"+(++position));
        // deselect the old selected position
        if(position>=0 && position <= suggestions - 1)
        {       
          oldTR.className = "";
        }
        // select the new suggestion and update the keyword
        if(position > 0)
        {
          newTR.className = "highlightrow";
          updateKeywordValue(newTR);
          position--;
          // scroll up if the current window is no longer valid
          if(position<minVisiblePosition)
          {
            oScroll = document.getElementById("scroll");
            oScroll.scrollTop -= 18;
            maxVisiblePosition -= 1;
            minVisiblePosition -= 1;
          }   
        }     
        else
          if(position == 0)
            position--;
        e.cancelBubble = true;
        e.returnValue = false;
        isKeyUpDownPressed = true;  
      }     
  }
}

/* function that updates the keyword value with the value 
   of the currently selected suggestion */
function updateKeywordValue(oTr)
{
  // retrieve the keyword object
  var oKeyword = document.getElementById("keyword");
  // retrieve the link for the current function
  var crtLink = document.getElementById("a" + 
                            oTr.id.substring(2,oTr.id.length)).toString();
  // replace - with _ and leave out the .php extension
 
  crtLink = crtLink.replace("-", "_");
  crtLink = crtLink.substring(0, crtLink.length - 4);
  // update the keyword's value
  oKeyword.value = unescape(crtLink.substring(phpHelpUrl.length, crtLink.length));
}

/* function that removes the style from all suggestions*/
function deselectAll()
{ 
  for(i=0; i<suggestions; i++)
  {
    var oCrtTr = document.getElementById("tr" + i);
    oCrtTr.className = "";    
  }
}

/* function that handles the mouse entering over a suggestion's area 
   event */
function handleOnMouseOver(oTr)
{
  deselectAll();  
  oTr.className = "highlightrow";  
  position = oTr.id.substring(2, oTr.id.length);
}

/* function that handles the mouse exiting a suggestion's area event */
function handleOnMouseOut(oTr)
{
  oTr.className = "";   
  position = -1;
}

/* function that escapes a string */
function encode(uri) 
{
  if (encodeURIComponent) 
  {
    return encodeURIComponent(uri);
  }

  if (escape) 
  {
    return escape(uri);
  }
}

/* function that hides the layer containing the suggestions */
function hideSuggestions()
{
  var oScroll = document.getElementById("scroll");
  oScroll.style.visibility = "hidden";  
}

/* function that selects a range in the text object passed as parameter */
function selectRange(oText, start, length)
{  
  // check to see if in IE or FF
  if (oText.createTextRange) 
  {
    //IE
    var oRange = oText.createTextRange(); 
    oRange.moveStart("character", start); 
    oRange.moveEnd("character", length - oText.value.length); 
    oRange.select();
 
  }
  else 
    // FF
    if (oText.setSelectionRange) 
    {
      oText.setSelectionRange(start, length);
    } 
  oText.focus(); 
}

/* function that autocompletes the typed keyword*/
function autocompleteKeyword()
{
  //retrieve the keyword object
  var oKeyword = document.getElementById("keyword");
  // reset the position of the selected suggestion
  position=0;
  // deselect all suggestions
  deselectAll();
  // highlight the selected suggestion 
  document.getElementById("tr0").className="highlightrow";  
  // update the keyword's value with the suggestion
  updateKeywordValue(document.getElementById("tr0"));  
  // apply the type-ahead style
  selectRange(oKeyword,httpRequestKeyword.length,oKeyword.value.length);  
  // set the autocompleted word to the keyword's value
  autocompletedKeyword=oKeyword.value;
}

/* function that displays an error message */
function displayError(message)
{
  // display error message, with more technical details if debugMode is true
  alert("Error accessing the server! "+
        (debugMode ? "\n" + message : ""));
}