Автозаполнение jQuery UI запускается в полевом фокусе в Internet Explorer при наличии атрибута html 5 placeholder

HTML:

<input type="text" name="item" value="" id="item" class="input-xlarge" placeholder="Enter item name or scan barcode" accesskey="i"  />

JavaScript:

    $( "#item" ).autocomplete({
        source: '<?php echo site_url("sales/item_search"); ?>',
        delay: 10,
        autoFocus: false,
        minLength: 0,
        select: function(event, ui)
        {
            event.preventDefault();
            $( "#item" ).val(ui.item.value);
            $('#add_item_form').ajaxSubmit({target: "#register_container", beforeSubmit: salesBeforeSubmit, success: itemScannedSuccess});
        }
    });

setTimeout(function(){$('#item').focus();}, 10);

Когда страница загружается в Internet Explorer, автозаполнение происходит с пустым значением термина, результатом которого является куча результатов. Если я удалю атрибут placeholder, он будет функционировать так, как ожидалось, и НЕ делает запрос до ввода текста.

Если я удалю событие фокуса, он также работает в Internet Explorer. Но мне нужно сосредоточиться на загрузке страницы, поэтому на самом деле это не варианты. Я также хотел бы сохранить текст заполнителя.

Элемент функционирует так, как ожидалось (без запроса до ввода) в сафари, firefox и chrome.

Это ошибка? Есть ли обходной путь, поэтому я могу использовать атрибут placeholder?

Я собрал 2 примера; сломанной и фиксированной. Единственная разница между ними - наличие атрибута placeholder (в сломанной версии).

Сломанный только ломается в IE и функционирует как ожидалось в других браузерах.

ПРИМЕЧАНИЕ: по сломанному я имею в виду, что при фокусировке на поле автозаполнение активируется, когда оно не должно быть.

http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html

http://blastohosting.com/jquery_ui_autocomplete_bug/working.html

ПРИМЕЧАНИЕ. В обоих этих примерах ajax всегда будет одним и тем же результатом. Пожалуйста, проигнорируйте это.

Ответы

Ответ 1

Проблема здесь в том, как Internet Explorer обрабатывает входное событие. Меню автозаполнения запускается во входном событии входного элемента (теги). https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js Линия 167

Если вы поместите этот код перед вашим setTimeout

document.getElementById('tags').addEventListener('input',function(ev){alert(ev.target.value);},false);

Вы увидите, что, например, встроенное событие ввода активируется в фокусе элемента. Этого не происходит на хроме. Поэтому, скорее всего, это не ошибка с jquery, а скорее особенность ie. Как вы сказали в своем вопросе, это происходит только тогда, когда элемент ввода имеет атрибут placeholder, без атрибута, входное событие не срабатывает в фокусе.

Я попытался добавить обработчик события one для фокуса, чтобы вызвать preventDefault(), прежде чем запускать фокус, но это все еще вызвало срабатывание входного события.

Атрибут autofocus html5 также по-прежнему вызывал событие ввода.

Я попробовал обернуть свой код в правильном html/head/body, но это не повлияло на

Наконец, в качестве обходного пути

1) Я по умолчанию присвоил свойству minLength значение 1

minLength: 1

2) В setTimeout я установил для параметра minLength значение 0

$("#tags").focus().autocomplete("minLength", 0);

Кажется, что это работает на 9.

Ответ 2

.autocomplete({
    delay: 0,
    //minLength: 0,
    minLength: 1,
    source: $.proxy(this, "_source")                         
})`

работает с флажками, как ответил Сумит. Вероятно, он работает и с текстовыми полями.

Но если вы используете автозаполнение в текстовом поле и не хотите использовать решение minlength, вы можете использовать альтернативно

$("your element or class tag").autocomplete("instance").menu.active = false;

после инициализации кода jQuery. Я не мог видеть, как этот оператор можно использовать для флажка, используемого в текстовом поле, если вы знаете, что я с удовольствием его слушаю.

Ответ 3

Следующий код помог мне решить эту проблему:

  $("your tag").autocomplete({
   source:bla-bla,
   open:function(e,ui) /*Hack for IE11*/
   {            
     $(this).focus();
   }
   })
   .one("focus",function(){/*Hack for IE11*/
     $(this).blur(); 
   });

В скором времени виджет вызывает фокус для вашего тега, для тега мы создаем функцию с одним триггером, которая вызывается только 1 раз, когда фокус теряется, вызывая размытие. Такой обман для IE (плохой IE).

Может быть, есть лучшее решение. Пожалуйста, поделитесь этим с этим форумом.

Ответ 4

владелец места означает, что что-то отображается в текстовом поле, а автоматически завершается, когда вы пишете что-то в текстовом поле, тогда вы получите автоматически полный результат, теперь в вашем случае вы уже отобразите что-то с использованием для placeholder

Сначала попробуйте удалить поле-заполнитель в текстовое поле Backspace и попробуйте его.

Ответ 5

Дорогой, пожалуйста, напишите этот код

    $("#item").live("keydown.autocomplete",function(){
        put your code here. and try it 
        });