Suggest-Ajax程序说明

 Suggest-Ajax程序说明

摘要：实现了Google Suggest搜索引擎的AJAX建议和自动完成功能。
 
 1. 功能说明
 Google Suggest是最成功的例子，你只要访问http://www.google.com，在输入框中输入字母或汉字，变能发现惊奇的功能。下面这个程序就是实现Google搜索引擎的AJAX建议和自动完成功能，具体如下：
 当用户打字时匹配函数检索结果并显示在一个可滚动的下拉列表中。
 当前关键字是返回结果的第一个建议，并自动补上缺失的字母。增加的部分高亮显示。
 与查询关键字匹配的开头几个字母在下拉列表中用黑体显示。
 下拉列表是可滚动的，但滚动条仅在结果列表超出预先定义的建议数目时才显示。
 
 本程序的来源是：Cristian Darie , Bogdan Brinzarea , Filip Cherecheş-Toşa , Mihai Bucica . AJAX and PHP Building Responsive Web Applications[M] .  Birmingham of USA : Packt Publishing Ltd. , 2006.
 源代码可以在出版社官方的网站( http://www.packtpub.com/support )上下载。在官方上下载需要验证E-mail地址，具体的下载地址可以到您的E-mail当中去找。
 注意：你的PHP要开启mysqli的模块，否则这个程序没有办法实现。开启办法见：http://blog.csdn.net/squirrelme/archive/2007/06/20/1659200.aspx
 欢迎您访问松鼠（squirrelme）的在CSDN的技术博客：http://blog.csdn.net/squirrelme
 
 2.程序和文件
 config.php------数据库连接文件。详细见代码1.
 suggest.sql------数据库数据文件。详细见代码2.
 index.html------搜索的首页。详细见代码3.
 suggest.css------index的样式表文件。详细见代码4 .
 error_handler.php------错误处理文件。详细见代码5.
 suggest.php------处理suggest类。详细见代码6.
 suggest.js------JavaScript文件。详细见代码7.
 suggest.class.php------模块控制。详细见代码8.
 
 3. 原理和流程
 Suggest-Ajax技术分位客户端和服务端。客户端见第4部分，代码分析。
 服务器端的的原理是：
 suggest.php文件接收到suggset.html发送的查询关键字的参数。然后调suggset.class.php中的suggest类方法，来查找与关键词匹配的建议。web服务器返回了一个包含了匹配当前关键词的PHP函数的XML响应，这样，工作集中在客户端，服务器端并没有多少工作的内容。
 
 
 4.代码分析
 （1）config.php------数据库连接文件，通过这个文件，您才能连接您的数据库。详细见代码1.
 （2）suggest.sql------数据库数据文件，在你的数据库中添加一个ajax的数据库名，然后执行sql语句，它的功能是说在ajax的数据库里添加一个表，表名是suggest，在这个表中有个name的字段，同时这也是主键，记录了搜索所需要的记录。详细见代码2.
 欢迎您访问松鼠（squirrelme）的在CSDN的技术博客：http://blog.csdn.net/squirrelme
 （3）index.html------搜索的首页，这里就不多介绍了。详细见代码3.
 （4）下面重点介绍一下JS文件的结构和功能。
 createXmlHttpRequestObject用来创建XMLHttpRequset请求。
 init函数只引发关键词框的自动完成属性。功能：阻止浏览器初始化自己的自动完成引擎。原理：autocomplete=off不是有效的XHTML定义，使HTML失效。
 checkCache函数检查一个给定的关键词是否在缓存当中。如果不在，试图在缓存的列表中找到最长的匹配前缀，通过addToCache函数添加到缓存中。
 getSuggestions函数用来取回新建议。如果当前关键词已经在缓存中（checkCache函数），直接用这些缓存的建议来填充建议列表。如果正在处理请求，那么请求的关键词将存储起来，并且设置超时值。
 handleGettingSuggestions函数检查到如果服务器请求完成并且没有发生错误时，就调用updateSuggestions。
 updateSuggestions函数检查是否有必要更新建议列表。
 xmlToArray函数将XML集合转换成一个数组。
 displayResults建立建议列表的真正函数。
 updateKeywordValue函数负责使用建议中当前选中的指定tr对象值来更新当前关键词。
 hideSuggestions函数隐藏了包含当前关键词的所有建议的div元素。
 handleOnMouseOver和handleOnMouseOut函数处理当前光标移开或放在一个建议的tr范围时发生的时间。同时更新样式。
 encode函数转义参数字符串，并且在调用服务器页时被getSuggestions函数调用。
 

5. 代码

/* =========代码1 config.php=========== */

<? php
/*  =========代码1 config.php开始===========  */
//  defines database connection data
// 定义数据连接数据
// 所要连接的数据库地址
define ( ' DB_HOST ' ,   ' localhost ' );
//  所要连接的MySQL用户名
define ( ' DB_USER ' ,   ' root ' );
//  所要连接的MySQL密码
define ( ' DB_PASSWORD ' ,   ' password ' );
//  所要连接的数据库
define ( ' DB_DATABASE ' ,   ' ajax ' ); 

   /* =========代码1 config.php结束=========== */
?>

 /* =========代码2  suggest.sql=========== */

/*  =========代码2  suggest.sql开始===========  */
    CREATE   TABLE  suggest 
(
  name  VARCHAR ( 100 )  NOT   NULL   DEFAULT   '' ,
   PRIMARY   KEY  (name)
);
 
INSERT   INTO  suggest (name)  VALUES  
  ( ' abs ' ),
  ( ' acos ' ),
  ( ' acosh ' ),
  ( ' addcslashes ' ),
  ( ' addslashes ' ),
  ( ' aggregate ' ),
  ( ' aggregate_info ' ),
  ( ' aggregate_methods ' ),
  ( ' aggregate_methods_by_list ' ),
  ( ' aggregate_methods_by_regexp ' ),
  ( ' aggregate_properties ' ),
  ( ' aggregate_properties_by_list ' ),
  ( ' aggregate_properties_by_regexp ' ),
  ( ' aggregation_info ' ),
  ( ' apache_child_terminate ' ),
  ( ' apache_getenv ' ),
  ( ' apache_get_modules ' ),
  ( ' apache_get_version ' ),
  ( ' apache_lookup_uri ' ),
  ( ' apache_note ' ),
  ( ' apache_request_headers ' ),
  ( ' apache_reset_timeout ' ),
  ( ' apache_response_headers ' ),
  ( ' apache_setenv ' ),
  ( ' apc_cache_info ' ),
  ( ' apc_clear_cache ' ),
  ( ' apc_define_constants ' ),
  ( ' apc_delete ' ),
  ( ' apc_fetch ' ),
  ( ' apc_load_constants ' ),
  ( ' apc_sma_info ' ),
  ( ' apc_store ' ),
  ( ' apd_breakpoint ' ),
  ( ' apd_callstack ' ),
  ( ' apd_clunk ' ),
  ( ' apd_continue ' ),
COMMIT ;

/* =========代码2  suggest.sql=========== */

/* =========代码3  index.html=========== */

<!--  =========代码3  index.html开始===========  -->
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"  lang ="en" >
   < head >
     < title > AJAX Suggest and Autocomplete </ title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
     < link  href ="suggest.css"  rel ="stylesheet"  type ="text/css"   />
     < script  type ="text/javascript"  src ="suggest.js" ></ script >
   </ head >
   < body >
     < noscript >
      Your browser does not support JavaScript!!
     </ noscript >
     < div  id ="content"  onclick ="hideSuggestions();" >
       < div  id ="message" > Enter the first letters of your function: </ div >
       < input  type ="text"  name ="keyword"  id ="keyword"  maxlength ="70"
             size ="69"  onkeyup  = "handleKeyUp(event)"  value =""   />
       < div  id ="scroll" >
         < div  id ="suggest" >
         </ div >
       </ div >
     </ div >   
   </ body >
</ html >
<!--  =========代码3  index.html结束===========  -->

/* =========代码4  suggest.css=========== */

 body
{...} {
  font-family: helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  font-size: 12px  
}

#content
{...} {
  height: 100%;
  width: 100%;
  text-align:center
}

#message
 
{...} {   
  font-weight: bold;
  text-align: center;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 10px
}

a 
{...} {
  text-decoration: none;
  margin: 0px;
  color: #173f5f
}
 
input 
{...} {
  border: #999 1px solid; 
  font-family: helvetica, sans-serif;
  font-weight: normal;
  font-size: 10px 
}

#scroll
{...} {
  position: relative;
  margin: 0 auto;
  visibility: hidden;
  background-color: white;
  z-index: 1;    
  width: 300px;
  height: 180px;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-collapse: collapse;
  border-bottom-style: solid;
  border-color: #000000;
  border-width: 1px;      
  overflow: auto
}

#scroll div
{...} {
  margin: 0 auto;
  text-align:left
}

#suggest table
{...} {
  width: 270px;
  font-size: 11px;
  font-weight: normal;
  color: #676767;
  text-decoration: none;
  border: 0px;
  padding: 0px;  
  text-align:left;   
  margin: 0px
}

.highlightrow
{...} {
  background-color: #999999;
  cursor: pointer
}
 

/* =========代码5  error_handler.php=========== */

<? php
/*  =========代码5  error_handler.php开始===========  */
//  set the user error handler method to be error_handler
// 设置用户错误控制函数
set_error_handler ( ' error_handler ' ,   E_ALL );
//  error handler function
// 错误控制函数
function  error_handler( $errNo ,   $errStr ,   $errFile ,   $errLine )
{
   //  clear any output that has already been generated
  // 清除所有已产生的输出
   if ( ob_get_length ())  ob_clean ();
   //  output the error message 
  // 输出错误信息
   $error_message   =   ' ERRNO:  '   .   $errNo   .   chr ( 10 )  .
                    ' TEXT:  '   .   $errStr   .   chr ( 10 )  .
                    ' LOCATION:  '   .   $errFile   .  
                    ' , line  '   .   $errLine ;
   echo   $error_message ;
   //  prevent processing any more PHP scripts
  // 防止继续处理PHP脚本
   exit ;
}
/*  =========代码5  error_handler.php结束===========  */
?>

/* =========代码6  suggest.php=========== */
 

<? php
/*  =========代码6  suggest.php开始===========  */
//  reference the file containing the Suggest class
// 引用包含Suggest类的文件
require_once ( ' suggest.class.php ' );
//  create a new Suggest instance
// 筹建Suggest实例
$suggest   =   new  Suggest();
//  retrieve the keyword passed as parameter
// 获取作为参数传递的关键词
$keyword   =   $_GET [ ' keyword ' ];
//  clear the output 
// 清除输出
if ( ob_get_length ())  ob_clean ();
//  headers are sent to prevent browsers from caching
// 发送标题阻止浏览器缓存
header ( ' Expires: Mon, 26 Jul 1997 05:00:00 GMT '  ); 
header ( ' Last-Modified:  '   .   gmdate ( ' D, d M Y H:i:s ' )  .   ' GMT ' ); 
header ( ' Cache-Control: no-cache, must-revalidate ' ); 
header ( ' Pragma: no-cache ' );
header ( ' Content-Type: text/xml ' );
//  send the results to the client
// 向客户端返回结果
echo   $suggest -> getSuggestions( $keyword );
/*  =========代码6  suggest.php结束===========  */
?>

/* =========代码7  suggest.js=========== */

/**/ /* =========代码7  suggest.js开始=========== */
/**/ /* URL to the PHP page called for receiving suggestions for a keyword*/
/**/ /* PHP返回关键字引擎的URL地址 */
var  getFunctionsUrl  =   " suggest.php?keyword= " ;

/**/ /* URL for seeing the results for the selected suggestion */
/**/ /* URL用于观察已选择的建议结果 */
var  phpHelpUrl = " http://www.php.net/manual/en/function. " ;

/**/ /* the keyword for which an HTTP request has been initiated */
/**/ /* 已经生成HTTP请求的关键词 */
var  httpRequestKeyword  =   "" ;

/**/ /* the last keyword for which suggests have been requested */
/**/ /* 最近建议的关键字 */
var  userKeyword  =   "" ;

/**/ /* number of suggestions received as results for the keyword */
/**/ /* 对关键字返回建议的数目 */
var  suggestions  =   0 ;

/**/ /* the maximum number of characters to be displayed for a suggestion */
/**/ /* 一个建议最多能显示的字符数 */
var  suggestionMaxLength  =   30 ;

/**/ /* flag that indicates if the up or down arrow keys were pressed
   the last time a keyup event occurred  */
/**/ /* 标志在最近一次keyup事件后，上下箭头键是否被按下 */
var  isKeyUpDownPressed  =   false ;

/**/ /* the last suggestion that has been used for autocompleting the keyword */
/**/ /* 最近一次用于自动完成的关键字 */
var  autocompletedKeyword  =   "" ;

/**/ /* flag that indicates if there are results for the current requested keyword*/
/**/ /* 标志是否有针对当前请求的关键字的结果 */
var  hasResults  =   false ;

/**/ /* the identifier used to cancel the evaluation with the clearTimeout method. */
/**/ /* 使用clearTimeout方法退出评估的标志 */
var  timeoutId  =   - 1 ;

/**/ /* the currently selected suggestion (by arrow keys or mouse)*/
/**/ /* 通过鼠标或上下箭头选择的建议 */
var  position  =   - 1 ;

/**/ /* cache object containing the retrieved suggestions for different keywords */
/**/ /* 缓存已接收的针对不同关键字的建议 */
var  oCache  =   new  Object();

/**/ /* the minimum and maximum position of the visible suggestions */
/**/ /* 可显示建议的最大最小位置 */
var  minVisiblePosition  =   0 ;
var  maxVisiblePosition  =   9 ;

//  when set to true, display detailed error messages
// 当设置为真时，显示错误信息的细节
var  debugMode  =   true ;

/**/ /* the XMLHttp object for communicating with the server */
/**/ /* 用于与服务器通信的XMLHttp对象 */
var  xmlHttpGetSuggestions  =  createXmlHttpRequestObject();

/**/ /* the onload event is handled by our init function */
/**/ /* 初始功能控制的onload时件 */
window.onload  =  init;

/**/ /* creates an XMLHttpRequest instance */
/**/ /* 创建XMLHttpRequest实例 */
function  createXmlHttpRequestObject() 
... {
  // will store the reference to the XMLHttpRequest object
  // 用于存放XMLHttpRequest对象的引用
  var xmlHttp;
  // this should work for all browsers except IE6 and older
  // 下面适用除了IE6及其更早版本外所有的浏览器
  try
  ...{
    // try to create XMLHttpRequest object
    // 尝试创建XMLHttpRequest对象
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  ...{
    // assume IE6 or older
    // 假设是IE6或其更早版本
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
    // try every prog id until one works
    // 尝试，直到创建成功
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) 
    ...{
      try 
 
      ...{ 
        // try to create XMLHttpRequest object
        // 尝试建立XMLHttpRequest对象
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      } 
      catch (e) ...{}
    }
  }
  // return the created object or display an error message
  // 返回创建的对象或错误信息
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttp;
}

/**/ /* function that initializes the page */
/**/ /* 初始化页面函数 */
function  init() 
... {  
  // retrieve the input control for the keyword
  // 获得关键字输入控制
  var oKeyword = document.getElementById("keyword");    
  // prevent browser from starting the autofill function
  // 阻止浏览器自动填充功能
  oKeyword.setAttribute("autocomplete", "off");  
  // reset the content of the keyword and set the focus on it
  // 重置关键字，并设置焦点
  oKeyword.value = "";
  oKeyword.focus();
  // set the timeout for checking updates in the keyword's value
  // 设置检查关键字更新的超时值
  setTimeout("checkForChanges()", 500);
}  

/**/ /* function that adds to a keyword an array of values */
/**/ /* 将关键字添加值数组中 */
function  addToCache(keyword, values)
... {
  // create a new array entry in the cache
  // 在缓存中创建一个新的串入口
  oCache[keyword] = new Array();
  // add all the values to the keyword's entry in the cache
  // 将所有的关键字的入口加入缓存
  for(i=0; i<values.length; i++)
    oCache[keyword][i] = values[i];
}

/**/ /* 
   function that checks to see if the keyword specified as parameter is in 
   the cache or tries to find the longest matching prefixes in the cache 
   and adds them in the cache for the current keyword parameter
*/
/**/ /* 
   检查参数中的关键字是否在缓存中，
   或找到缓存中与关键字前缀最长匹配，
   并根据当前关键字参数把前缀加入缓冲
*/
function  checkCache(keyword)
... {
  // check to see if the keyword is already in the cache
  // 检查缓存中是否有当前关键字
  if(oCache[keyword])
    return true;
  // try to find the biggest prefixes
  // 尝试找到匹配的最长前缀
  for(i=keyword.length-2; i>=0; i--)
  ...{
    // compute the current prefix keyword
    //计算出当前前缀关键字
    var currentKeyword = keyword.substring(0, i+1);
    // check to see if we have the current prefix keyword in the cache
    // 检查缓存中是否有当前前缀关键字
    if(oCache[currentKeyword])
    ...{            
      // the current keyword's results already in the cache
      // 缓存中已有的当前关键字结果
      var cacheResults = oCache[currentKeyword];
      // the results matching the keyword in the current cache results
      // 匹配关键字的结果在当前缓冲结果中
      var keywordResults = new Array();
      var keywordResultsSize = 0;            
      // try to find all matching results starting with the current prefix
      // 尝试找出所有符合当前前缀的结果
      for(j=0;j<cacheResults.length;j++)
      ...{
 
        if(cacheResults[j].indexOf(keyword) == 0)               
          keywordResults[keywordResultsSize++] = cacheResults[j];
      }      
      // add all the keyword's prefix results to the cache
      // 将所有关键词前缀结果加入缓存
      addToCache(keyword, keywordResults);      
      return true;  
    }
  }
  // no match found
  // 如果没有匹配的结构返回false
  return false;
}

/**/ /* initiate HTTP request to retrieve suggestions for the current keyword */
/**/ /* 生成HTTP请求用于找到当前关键字的建议 */
function  getSuggestions(keyword) 
... {  
  /**//* continue if keyword isn't null and the last pressed key wasn't up or 
     down */
  /**//* 如果关键字不为空且最后按的键不是上下箭头键 */
  if(keyword != "" && !isKeyUpDownPressed)
  ...{
    // check to see if the keyword is in the cache
    // 检查关键词是否在缓存中
    isInCache = checkCache(keyword);
    // if keyword is in cache...
    // 如果关键字在缓存中
    if(isInCache == true)          
    ...{   
      // retrieve the results from the cache          
      // 从缓存中获取结果
      httpRequestKeyword=keyword;
      userKeyword=keyword;     
      // display the results in the cache
      // 显示缓存中的结果
      displayResults(keyword, oCache[keyword]);                          
    }
    // if the keyword isn't in cache, make an HTTP request
    // 如果关键字不在缓存中，生成HTTP请求
    else    
    ...{    
      if(xmlHttpGetSuggestions)
      ...{ 
        try
        ...{
          /**//* if the XMLHttpRequest object isn't busy with a previous
             request... */
          /**//* 如果XMLHttpRequest对象忙于前一个请求 */
          if (xmlHttpGetSuggestions.readyState == 4 || 
              xmlHttpGetSuggestions.readyState == 0) 
          ...{    
            httpRequestKeyword = keyword;
            userKeyword = keyword;
            xmlHttpGetSuggestions.open("GET", 
                                getFunctionsUrl + encode(keyword), true);
            xmlHttpGetSuggestions.onreadystatechange = 
                                                handleGettingSuggestions; 
            xmlHttpGetSuggestions.send(null);
          }
          // if the XMLHttpRequest object is busy...
          // 如果XMLHttpRequest对象忙
          else
          ...{
            // retain the keyword the user wanted             
            // 保留用户需要的关键字
            userKeyword = keyword;
            // clear any previous timeouts already set
            // 清除先前设置的超时请求
            if(timeoutId != -1)
              clearTimeout(timeoutId);          
            // try again in 0.5 seconds
            // 0.5秒后再试一次
            timeoutId = setTimeout("getSuggestions(userKeyword);", 500);
          }
        }
        catch(e)
 
        ...{
          displayError("Can't connect to server: " + e.toString());
        }
      }
    }    
  }
}

/**/ /* transforms all the children of an xml node into an array */
/**/ /* 将XML节点的所有子节点转换为数组 */
function  xmlToArray(resultsXml)
... {
  // initiate the resultsArray
  // 初始化结果数组
  var resultsArray= new Array();  
  // loop through all the xml nodes retrieving the content
  // 在得到的XML节点中循环取得结果
  for(i=0;i<resultsXml.length;i++)
    resultsArray[i]=resultsXml.item(i).firstChild.data;
  // return the node's content as an array
  // 将节点的内容转化为数组
  return resultsArray;
}

/**/ /* handles the server's response containing the suggestions 
   for the requested keyword  */
/**/ /* 处理服务器针对所请求关键字建议的响应 */
function  handleGettingSuggestions() 
... {
  //if the process is completed, decide what to do with the returned data
  // 如果过程已经结束，决定如何处理数据
  if (xmlHttpGetSuggestions.readyState == 4) 
  ...{
    // only if HTTP status is "OK"
    // 只有HTTP状态为OK时
    if (xmlHttpGetSuggestions.status == 200) 
    ...{ 
      try
      ...{
        // process the server's response
        //处理服务器响应
        updateSuggestions();
      }
      catch(e)
      ...{
        // display the error message
        //显示错误信息
        displayError(e.toString()); 
      }  
    } 
    else
    ...{
      displayError("There was a problem retrieving the data: " + 
                   xmlHttpGetSuggestions.statusText);
    }       
  }
}

/**/ /* function that processes the server's response */
/**/ /* 处理服务器响应函数 */
function  updateSuggestions()
... {
  // retrieve the server's response 
  // 获取服务器响应
  var response = xmlHttpGetSuggestions.responseText;
  // server error?
  // 判断是否服务器错误
  if (response.indexOf("ERRNO") >= 0 
      || response.indexOf("error:") >= 0
      || response.length == 0)
    throw(response.length == 0 ? "Void server response." : response);
  // retrieve the document element
  // 获取document元素
  response = xmlHttpGetSuggestions.responseXML.documentElement;
  // initialize the new array of functions' names
  // 初始化新的函数数组
  nameArray = new Array();
  // check to see if we have any results for the searched keyword
  //检查是否有关于关键字的结果
  if(response.childNodes.length)
  ...{
    /**//* we retrieve the new functions' names from the document element as 
       an array */
    /**//* 名字数组从document元素转化的数组中获取新的函数 */
    nameArray= xmlToArray(response.getElementsByTagName("name"));       
  }
  // check to see if other keywords are already being searched for
  // 检查是否已经被搜索其它的关键字
  if(httpRequestKeyword == userKeyword)    
  ...{
    // display the results array
    // 显示结果数组
    displayResults(httpRequestKeyword, nameArray);
  }
  else
  ...{
    // add the results to the cache
    // 在缓存中添加结果
    // we don't need to display the results since they are no longer useful
    // 不需要显示已经失败的结果
    addToCache(httpRequestKeyword, nameArray);              
  }
}


/**/ /* populates the list with the current suggestions */
/**/ /* 使用当前建议生成列表 */
function  displayResults(keyword, results_array) 
... {  
  // start building the HTML table containing the results  
  // 开始创建HTML表格存放结果
  var div = "<table>"; 
  // if the searched for keyword is not in the cache then add it to the cache
  // 如果搜索的结果不在缓存中，将其添加入缓存
  if(!oCache[keyword] && keyword)
    addToCache(keyword, results_array);
  // if the array of results is empty display a message
  // 如果结果数组为空，显示一个信息
  if(results_array.length == 0)
  ...{
    div += "<tr><td>No results found for <strong>" + keyword + 
           "</strong></td></tr>";
    // set the flag indicating that no results have been found 
    // 设置一个标志表示没有查询到结果
    // and reset the counter for results
    // 结果计数器复位
    hasResults = false;
    suggestions = 0;
  }
  // display the results
  // 显示结果
  else
  ...{
    // resets the index of the currently selected suggestion
    // 复位标志上下箭头键是否按下的标志
    position = -1;
    // resets the flag indicating whether the up or down key has been pressed
    // 复位表示关键字结果的标志位
    isKeyUpDownPressed = false;
    
    /**//* sets the flag indicating that there are results for the searched 
       for keyword */
    /**//* 设置表示关键字结果的标志位 */
    hasResults = true;
    // get the number of results from the cache
    // 获取缓存中结果的数目
    suggestions = oCache[keyword].length;
    // loop through all the results and generate the HTML list of results
    // 循环将结果生成HTML列表
    for (var i=0; i<oCache[keyword].length; i++) 
    ...{  
      // retrieve the current function
      // 获取当前函数
      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
      // 开始创建链接到当前函数的PHP帮助页面的HTML行
 
      div += "<tr id='tr" + i + 
             "' οnclick='location.href=document.getElementById("a" + i + 
             "").href;' οnmοuseοver='handleOnMouseOver(this);' " + 
             "οnmοuseοut='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
  //创建HTML表格结束
  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 */
    /**//* 如果按下了回车键，转向当前函数的PHP帮助页面 */
    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
  // 重置_，不考虑.PHP扩展
  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
  // 检查是否在IE或者FireFox环境下
  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
  // 如果debugMode值为true，显示错误信息更详细的技术细节
  alert("Error accessing the server! "+
        (debugMode ? " " + message : ""));
}
/**/ /* =========代码7  suggest.js结束=========== */

/* =========代码8 suggest.class.php=========== */

<? php
/*  =========代码8 suggest.class.php开始===========  */
//  load error handling module
// 加载错误控制模块require_once('error_handler.php')
require_once ( ' error_handler.php ' );
//  load configuration file
// 加载数据库文件
require_once ( ' config.php ' );

//  class supports server-side suggest & autocomplete functionality
// 实现服务器端建议和自动完成功能的类class suggest
class  Suggest
{
     //  database handler
    // 数据库控制
   private   $mMysqli ;
  
   //  打开数据库连接
  // constructor opens database connection
   function  __construct() 
  {   
       //  connect to the database
      // 连接数据库
$this -> mMysqli  =   new  mysqli(DB_HOST ,  DB_USER ,  DB_PASSWORD ,  
                                                          DB_DATABASE);     
  }
  
  
   //  destructor, closes database connection
  // 关闭数据库连接  
   function  __destruct() 
  {
     $this -> mMysqli -> close();
  }
  
  
   //  returns all PHP functions that start with $keyword
  // 返回所有由$keyword 开始的PHP函数
   public   function  getSuggestions( $keyword )
  {
      
     //  escape the keyword string
    // 离开关键字字符串      
     $patterns   =   array ( ' /s+/ ' ,   ' /"+/ ' ,   ' /%+/ ' );
     $replace   =   array ( '' );
     $keyword   =   preg_replace ( $patterns ,   $replace ,   $keyword );
    
     //  build the SQL query that gets the matching functions from the database
    // 创建SQL查询，从数据库获取匹配的功能
     if ( $keyword   !=   '' )
       $query   =   ' SELECT name  '   .
                ' FROM suggest  '   .  
                ' WHERE name LIKE " '   .   $keyword   .   ' %" ' ;
    
     //  if the keyword is empty build a SQL query that will return no results
    // 如果关键字为空，创建一个不返回任何结果的查询
     else
       $query   =   ' SELECT name  '   .
 
                ' FROM suggest  '   .
                ' WHERE name="" ' ; 
    
     //  execute the SQL query
    // 执行SQL查询
     $result   =   $this -> mMysqli -> query( $query );
    
     //  build the XML response
    // 创建XML响应
     $output   =   ' <?xml version="1.0" encoding="UTF-8" standalone="yes"?> ' ;
     $output   .=   ' <response> ' ;    
    
     //  if we have results, loop through them and add them to the output
    // 如果已经去的结果，循环将它们放入输出
     if ( $result -> num_rows)
       while  ( $row   =   $result -> fetch_array(MYSQLI_ASSOC)) 
         $output   .=   ' <name> '   .   $row [ ' name ' ]  .   ' </name> ' ;
    
     //  close the result stream 
    // 关闭结果流
     $result -> close();
    
     //  add the final closing tag
    // 添加结束标签
     $output   .=   ' </response> ' ;   
    
     //  return the results
    // 返回结果
     return   $output ;  
  }

// end class Suggest
//Suggest类结束
}
/*  =========代码8 suggest.class.php结束===========  */
?>

版权所有，转载请注明出处。http://blog.csdn.net/squirrelme

最后

以上就是故意鸵鸟为你收集整理的Suggest-Ajax程序说明的全部内容，希望文章能够帮你解决Suggest-Ajax程序说明所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。