scriptaculous ajax自动完成空响应

时间:2009-03-18 11:20:38

标签: ajax autocomplete prototypejs scriptaculous

我正在使用ajax-autocompleter,效果很好。 我的目标是在现有项目的编辑功能或未找到项目的创建功能之间重定向。

我为每个li插入一个特定的id,因此我可以将它用于带有afterUpdateElement选项的编辑功能。

但如果没有找到结果,列表为空,我找不到任何方法告诉afterUpdateElement脚本没有找到结果。 实际上,没有调用afterUpdateElement,因为没有选择。所以afterUpdateElement没用......

我正在考虑测试ajax请求发送的完整值。 但我没有找到如何抓住它......

2 个答案:

答案 0 :(得分:1)

所以,我终于找到了一种检查结果是否被选中的方法(在Gwyohm的帮助下):

  1. 首先,我们设置一个隐藏字段,记录是否选择了结果(true / false)。默认情况下,它设置为FALSE。
  2. afterUpdateElement仅在选择后使用。所以我们使用这个aferUpdateElement将我们的隐藏字段变为TRUE。
  3. 如果用户更改了搜索字段值,则对于未选择的全新值,不会使用afterUpdateElement,并且我们的隐藏值仍设置为TRUE。 该问题的解决方案是听一键按下。如果按下某个键,则隐藏字段将变回FALSE。这适用于所有键,甚至是实际用于进行选择的Enter键。所以这是我们应该从keypress监听器中删除的一个例外。 所以,最后让我们来看看我们的额外功能:

      

    $(id-of-text-field).observe(“keyup”,function(e){

         
        

    if(window.event)keycode = window.event.keyCode;
        否则,如果(e)keycode = e.which;
        if(keycode!= 13){

             
          

    $(ID-的隐藏字段)。价值= “FALSE”;

        
             

    }

      
         

    } bindAsEventListener($(ID-的文本字段)));

  4. 然后我们可以使用隐藏字段来了解是否应该编辑或创建文本值...

    注意:使用此解决方案,如果用户键入与现有值匹配的值而不选择它,则会将其视为新值,如果将此值添加到数据库,则会导致重复条目。 (但这对我来说没问题,因为我正在处理名字,两个不同的人可能有相同的名字......)

答案 1 :(得分:1)

您可以尝试覆盖updateChoices方法,如下所示:

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
if(!this.changed && this.hasFocus) {

      if(!choices) {
        //do your "new item" thing here
      }
      else {
         this.update.innerHTML = choices;
         Element.cleanWhitespace(this.update);
         Element.cleanWhitespace(this.update.down());

         if(this.update.firstChild && this.update.down().childNodes) {
           this.entryCount =
             this.update.down().childNodes.length;
           for (var i = 0; i < this.entryCount; i++) {
             var entry = this.getEntry(i);
             entry.autocompleteIndex = i;
             this.addObservers(entry);
           }
         } else {
           this.entryCount = 0;
         }

         this.stopIndicator();
         this.index = 0;

         if(this.entryCount==1 && this.options.autoSelect) {
           this.selectEntry();
           this.hide();
         } else {
           this.render();
         }
      }
   }
}

在controls.js中覆盖不是一个好的想法。相反,您可以将其添加到新的.js并将其包含在库之后。

编辑:pff ..对不好的缩进感到抱歉,但是它是从TextMate复制/粘贴的,并且有与空格结合的标签。我希望你明白这一点。我添加的唯一内容是

      if(!choices) {
        //do your "new item" thing here
      }
      else {}

块。另外,我没有测试代码,但我认为它应该可行。