通过'＆'和'）'禁用滚动浏览Ajax.Autocompleter建议列表

我使用Ajax.Autocompleter组件，它很好用 - 在一些浏览器中除了＆符号。问题在于，不是将＆符号打印到搜索字段中，而是充当ajax建议列表中的“向上”箭头。这使我的用户无法在搜索框中输入带＆字符的名称。通过'＆'和'）'禁用滚动浏览Ajax.Autocompleter建议列表

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

特定行为的情况：

如果我尝试输入符号到我的搜索栏中显示与建议列表之前，该符号被添加到搜索领域，一切都好。

如果我尝试建议列表后键入符号已经可见，它将导航到列表的末尾，而不是，并没有将添加到搜索栏（浏览器）。

如果我在IE11中重复这种情况，它也会导航到列表的末尾，但也会将和号添加到搜索字段。但是，在这种情况下，ajax搜索不会被触发 - 建议列表将保持不变，因为在我点击'&'键，之前，无论搜索字段不是以&结尾。

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

通过试验和错误，我注意到：

当我在Chrome中打开F12，以及调试JavaScript中，符号被印刷的，而不是通过建议列表导航。当调试关闭时，它不会打印任何内容并导航。

如果我使用ctrl + v将＆符号粘贴到搜索字段中，它在所有浏览器中都可以正常工作。另一方面，left + 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项目，但由于这看起来也可能与浏览器有关，所以我希望有人可能至少有部分答案。

来源

2014-10-29 Arides

元凶找到了！

事实证明，铬和IE11（甚至更多）的浏览器有两者的UP箭头，在“onkeypress事件”功能的“&”键相同的键代码值。要多读一点，请参见this thread。有些建议使用的，而不是“按键”的“的keyDown”事件，我有一个解决办法，而不是去了。

我已经更改了文件'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采取的代码。

来源

2014-11-05 16:36:58 Arides

经过更多的调试，我发现是什么导致了这个问题。 scriptaculous图书馆由几个组成。js文件 - 第一个问题是在文件“controls.js”，线129

这里是处理一些击键的功能 - 例如UP和DOWN箭头在建议列表中导航。在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则忽略这个功能方向键等）

来源

2014-11-04 12:21:42 Arides

通过'＆'和'）'禁用滚动浏览Ajax.Autocompleter建议列表

回答

相关问题