通过JSF 2实现可重用的Ajax化组件(1)(5)

清单5显示了自动完成组件所使用的JavaScript：

清单5.JavaScript

if (!com)  
   var com = {}  
 
if (!com.corejsf) {  
   var focusLostTimeout  
   com.corejsf = {  
      errorHandler : function(data) {  
         alert("Error occurred during Ajax call: " + data.description)  
      },  
 
      updateCompletionItems : function(input, event) {  
         var keystrokeTimeout  
 
         jsf.ajax.addOnError(com.corejsf.errorHandler)  
 
         var ajaxRequest = function() {  
 
            jsf.ajax.request(input, event, {  
               render: com.corejsf.getListboxId(input),  
               x: Element.cumulativeOffset(input)[0],  
               y: Element.cumulativeOffset(input)[1]  
                     + Element.getHeight(input)  
            })  
         }  
 
         window.clearTimeout(keystrokeTimeout)  
         keystrokeTimeout = window.setTimeout(ajaxRequest, 350)  
      },  
 
      inputLostFocus : function(input) {  
         var hideListbox = function() {  
            Element.hide(com.corejsf.getListboxId(input))  
         }  
 
         focusLostTimeout = window.setTimeout(hideListbox, 200)  
      },  
 
      getListboxId : function(input) {  
         var clientId = new String(input.name)  
         var lastIndex = clientId.lastIndexOf(':')  
         return clientId.substring(0, lastIndex) + ':listbox'  
      }  
   }  
}  
 

清单5中的JavaScript包括三个函数，我把它们放置在com.corejsf名称空间的内部。我实现了名称空间从技术上说是一个JavaScript字面对象），以防止其他人有意或无意修改我的三个函数。

如果这些函数未包含在com.corejsf中，则其他人可以实现自己的updateCompletionItems函数，从而将我的实现替换成它们。一些JavaScript库可以实现一个updateCompletionItems函数，但最理想的情况是任何人都不用设计com.corejsf.updateCompletionItems。相反，抛弃com，并使用corejsf.updateCompletionItems可能已经足够，但有时会难以控制。）

因此，这些函数做了些什么？updateCompletionItems()函数向服务器发起Ajax请求—通过调用JSF的jsf.ajax.request()函数—要求JSF仅在Ajax调用返回时呈现列表框组件。updateCompletionItems()函数还传递了两个额外的参数到jsf.ajax.request()中：列表框左上角的x和y坐标。jsf.ajax.request()函数会将这些函数参数转换为通过Ajax调用发送的请求参数。

JSF会在文本输入失焦时调用inputLostFocus()函数。该函数的作用是使用Prototype的Element对象来隐藏列表框。

updateCompletionItems()和inputLostFocus()将它们的功能存储在一个函数中。然后，它们安排自己的函数分别在350ms和200ms时执行。换句话说，每个函数都有各自的任务，但它会让任务延时350ms或200ms。文本输入会在keyup事件后延时，因此，updateCompletionItems()方法会最多每隔350ms发送一个Ajax请求。其思想是，如果用户输入速度极快，则不会让Ajax调用淹没服务器。

inputLostFocus函数会在文本输入失焦时调用，并延时其任务200ms。这种延时是必要的，因为该值会在Ajax调用返回时复制到列表框之外，并且列表框必须为可见才能确保它正常运行。

最后，请注意getListBoxId()函数。这个帮助器函数会从文本输入的客户机标识符中获取列表框的客户机标识符。该函数可以完成此任务，因为它将与清单4中的autoComplete组件相结合。autoComplete组件将input和listbox分别指定为文本框和列表框的组件标识符，因此getListBoxId()函数会删除input并附加listbox，以便获取文本输入的客户机标识符。