通过“&”和“)”禁用滚动 Ajax.Autocompleter 建议列表

Question

我正在使用 Ajax.Autocompleter 组件，它工作得很好 - 除了在某些浏览器中的 & 符号。问题在于，不是将 & 号打印到搜索字段中，而是在 ajax 建议列表中充当“向上”箭头。这使我的用户无法在搜索框中输入带有和号的名称。

http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter

具体行为案例：

• 如果我在显示建议列表之前尝试在搜索字段中输入与号，则与号会添加到搜索字段中，一切正常。

• 如果我尝试在建议列表已经可见之后键入与号，它将导航到列表的末尾，并且不会将任何内容添加到搜索字段（Chrome )。

• 如果我在 IE11 中重复这个场景，它也会导航到列表的末尾，但还会将 & 符号添加到搜索字段。但是，在这种情况下，不会触发 ajax 搜索 - 建议列表将保持在我点击“&”键之前的状态，不管搜索字段不是以 & 结尾的事实 .

• Firefox 只是将 '&' 字符添加到搜索框并刷新自动完成建议列表。正如我所料。

通过反复试验，我注意到：

• 当我在 chrome 中打开 F12 并调试 javascript 时，会打印 & 符号，而不是在建议列表中导航。当调试关闭时，它不会打印任何内容，而是进行导航。
• 如果我使用 ctrl+v 将 & 符号粘贴到搜索字段中，它在所有浏览器中都可以正常工作。另一方面，左 alt + 38 完成上述操作，与普通键相同。

我的代码：

<input name="searchTxt" id="searchTxt" type="text" autocomplete="off" />
<div id="autocompleteResults" style="display:none;border:1px solid black;background-color:white;text-align:left;"></div>

<script type="text/javascript" language="javascript" charset="utf-8">
  new Ajax.Autocompleter('searchTxt','autocompleteResults','someUrlToGetAutocompleteResults', {});
</script>

到目前为止，我能找到的唯一线索非常薄弱：

• 有人在 chrome 和 youtube 搜索中遇到类似 & 符号的问题 https://productforums.google.com/forum/#!topic/chrome/mpt4fkaAQPg
• 另一个关于 Ajax.Autocompleter 的 StackOverflow 线程，但完全不相关 How do I make an Ajax.Autocompleter perform a request without typing?

感谢任何帮助 - 我将更详细地研究 Ajax.Autocompleter 项目，但由于这似乎也可能与浏览器相关，所以我希望有人至少能得到部分答案。

Answer 1

经过更多调试，我发现了导致此问题的原因。 scriptaculous 库包含几个 .js 文件 - 第一个问题在文件 'controls.js' 的第 129 行。

这是一个处理一些击键的函数 - 例如向上和向下箭头来浏览建议列表。在 chrome 中，此函数在按下 '&' 和 '(' 键而不是箭头后被调用，从而导致问题。

  onKeyPress: function(event) {
    if(this.active)
      switch(event.keyCode) {
       case Event.KEY_TAB:
       case Event.KEY_RETURN:
         this.selectEntry();
         Event.stop(event);
       case Event.KEY_ESC:
         this.hide();
         this.active = false;
         Event.stop(event);
         return;
       case Event.KEY_LEFT:
       case Event.KEY_RIGHT:
         return;
       case Event.KEY_UP:
         this.markPrevious();
         this.render();
         Event.stop(event);
         return;
       case Event.KEY_DOWN:
         this.markNext();
         this.render();
         Event.stop(event);
         return;
      }
     else
       if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
         (Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;

    this.changed = true;
    this.hasFocus = true;

    if(this.observer) clearTimeout(this.observer);
      this.observer =
        setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
  }

虽然这仍然不是根本原因，但它绝对是可以使用的，并且至少可以用于解决方法（如果 chrome 则忽略此功能中的箭头键等）

Answer 2

找到罪魁祸首！

事实证明，chrome 和 IE11（可能更多）浏览器的向上箭头和 'onKeyPress' 函数中的 '&' 键具有相同的 keyCode 值。要了解更多信息，请参阅this thread。有些人建议使用“keyDown”事件而不是“keyPress”，我采用了一种解决方法。

我已更改文件“controls.js”第 129 行中的 onKeyPress 功能代码。解决方法不是 100% - 但它通过 shift+7 使 & 号工作，同时在 firefox 中保留箭头键功能。

  onKeyPress: function(event) {

    //Added this workaround
    var is_shift;
    if (window.event) {
        is_shift = window.event.shiftKey ? true : false;
    } else {
        is_shift = event.shiftKey ? true : false;
    }

    if(this.active)
      ...
       case Event.KEY_UP:
         if (!is_shift) //Added this workaround
         {
             this.markPrevious();
             this.render();
             Event.stop(event);
             return;
         }
       case Event.KEY_DOWN:
         if (!isShift) //Added this workaround
         {
             this.markNext();
             this.render();
             Event.stop(event);
             return;
         }
      }
    ...
  }

班次变通思路来自here，而获取班次状态的代码来自here。