通過'＆'和'）'禁用滾動瀏覽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建議列表

回答

相關問題