2014-10-29 4 views
1

Я использую компонент Ajax.Autocompleter, который отлично работает - кроме амперсандов в некоторых браузерах. Проблема заключается в том, что вместо того, чтобы печатать знак амперсанда в поле поиска, он действует как стрелка вверх в списке предложений ajax. Это приводит к тому, что мои пользователи не могут записывать имена с амперсандами в поле поиска.Отключить прокрутку списка предложений Ajax.Autocompleter через '&' и ')'

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

Конкретные случаи поведения:

  • Если я пытаюсь напечатать амперсанд в моем поле поиска перед списком с предложениями показано, амперсанд добавляется в поле поиска и все Что ж.

  • Если я пытаюсь напечатать амперсанд после списка предложений уже виден, он будет перемещаться к концу списка вместо этого, и ничего не будет добавлен в поле поиска (Chrome).

  • Если я повторю этот сценарий в IE11, он также переместится в конец списка, но также добавит амперсанд в поле поиска. Однако в этом случае поиск ajax не будет активирован - список предложений останется таким, каким он был до того, как я нажму кнопку «&», , независимо от того, что поле поиска не заканчивается &.

  • Firefox просто добавляет символ «&» в поле поиска и обновляет список предложений автозаполнения. Как и следовало ожидать.

Методом проб и ошибок, я заметил, что:

  • Когда я открываю F12 в хроме и отладки JavaScript, амперсанд печатается вместо навигации по списку внушения. Когда отладка отключена, он ничего не печатает и не переводит.
  • Если я использую ctrl + v, чтобы вставить амперсанд в поле поиска, он отлично работает во всех браузерах. С другой стороны, left 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> 

Единственные подсказки, которые я смог найти до сих пор довольно слаб:

Любая помощь приветствуется - я подробно рассмотрю проект Ajax.Autocompleter, но поскольку это казалось, что это также может быть связано с браузером, я спросил с надеждой, что у кого-то может быть хотя бы частичный ответ ,

ответ

0

Виновник найден!

Как оказалось, хром и IE11 (и, возможно, более) браузеры имеют то же значение ключевого кода как для стрелки ВВЕРХ, так и для клавиши «&» в функции onKeyPress. Чтобы прочитать немного больше, см. this thread. Некоторые рекомендуют использовать событие «keyDown» вместо «keyPress», вместо этого я пошел обходным путем.

Я изменил код функции onKeyPress в файле «controls.js», строка 129. Обходной путь не 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.

0

После дополнительной отладки я обнаружил, что вызывает эту проблему. Скриптальная библиотека состоит из нескольких.js files - первая проблема в файле «controls.js», строка 129.

Вот функция, которая обрабатывает некоторые нажатия клавиш - например, стрелки ВВЕРХ и ВНИЗ, чтобы перемещаться по списку предложений. В хроме, эта функция вызывается после нажатия «(» клавиши «&», а вместо стрелок, тем самым вызывая проблему.

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); 
    } 

Хотя это еще не главная причина, это определенно что-то, чтобы работать с и может быть использован по крайней мере, для обхода (если хром затем игнорировать клавиши со стрелками в этой функции и т.д.)

Смежные вопросы