scriptaculous ajax 自动完成空响应

Question

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

我向每个 li 插入一个特定的 id，因此我可以使用 afterUpdateElement 选项将其用于编辑功能。

但是，如果没有找到结果，则列表为空，并且我找不到任何方法来告诉 afterUpdateElement 脚本没有找到结果。 事实上，没有调用 afterUpdateElement，因为没有选择。 所以 afterUpdateElement 是没用的......

我正在考虑测试 ajax 请求发送的完整值。 但我没找到怎么抢…

Answer 1

所以，我终于找到了一种方法来检查结果是否被选择（在 Gwyohm 的巨大帮助下）：

1. 首先，我们设置一个隐藏字段，它将记录是否选择了结果（真/假）。 默认情况下，它设置为 FALSE。
2. afterUpdateElement 仅在选择后使用。 所以我们使用这个 aferUpdateElement 将我们的隐藏字段变为 TRUE。

3. 如果用户更改搜索字段值，对于未选择的全新值，不会使用 afterUpdateElement，并且我们的隐藏值仍设置为 TRUE。
   该问题的解决方案是听按下按键的声音。 如果按下某个键，则隐藏字段将返回 FALSE。 这适用于所有键，甚至是实际用于进行选择的 Enter 键。 所以这是一个我们应该从按键监听器中删除的异常。
   所以，最后让我们看看我们的额外功能：

   <块引用>

   $(文本字段的id).observe("keyup", function(e) {

   <块引用>

   if (window.event) keycode = window.event.keyCode;
   else if (e) keycode = e.which;
   if（键码！=13）{

   <块引用>

   $(id-of-hidden-field).value="FALSE";

   }

   }.bindAsEventListener($(文本字段的id)));

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

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

Answer 2

您可以尝试像这样覆盖 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 {}

块。 另外，我没有测试代码，但我认为它应该可以工作。