2016-10-24 2 views
0

Я получаю пустой div, появляющийся в Internet Explorer, когда список автозаполнения огромен. Для небольших списков он отлично работает.Как исправить этот пустой список, появляющийся в manizeecss autocomplete? (Internet Explorer)

Шаги для воспроизведения: -

  1. Проверить это codepen: - codepenForBlankListInMaterializeAutocomplete в Internet Explorer, (версия 9/11).
  2. Напишите A в текстовом поле.
  3. Наблюдайте за Apple/Apple00/Apple01 .... в списке.
  4. Выбрать Apple
  5. Наблюдать за пустым списком. Blank List

Глава Порция: -

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="msapplication-tap-highlight" content="no" /><title>Test for Autocomplete</title> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"/> 

Код HTML: -

<div class="row"> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">textsms</i> <input type="text" id="autocomplete-input" class="autocomplete"> <label for="autocomplete-input">Autocomplete</label> </div> </div> </div> </div>

Сценарий: -

$(function() { 
    $('input.autocomplete').autocomplete({ 
     data: { 
      "Apple": null, 
      "Apple00": null, 
      "Apple01": null, 
      "Apple02": null, 
      "Apple03": null, 
      "Apple04": null, 
      "Apple05": null, 
      "Apple07": null, 
      "Apple08": null, 
      "Apple09": null, 
      "Apple10": null, 
      "Apple11": null, 
      "Apple12": null, 
      "Apple13": null, 
      "Apple14": null, 
      "Apple15": null, 
      "Apple16": null, 
      "Apple17": null, 
      "Apple18": null, 
      "Apple19": null, 
      "Apple20": null, 
      "Apple21": null, 
      "Apple22": null, 
      "Apple23": null, 
      "Apple24": null, 
      "Apple25": null, 
      "Apple27": null, 
      "Apple28": null, 
      "Apple29": null, 
      "Apple30": null, 
      "Apple31": null, 
      "Apple32": null, 
      "Apple33": null, 
      "Apple34": null, 
      "Apple35": null, 
      "Apple36": null, 
      "Apple37": null, 
      "Apple38": null, 
      "Apple39": null, 
      "Apple40": null, 
      "Apple41": null, 
      "Apple42": null, 
      "Apple43": null, 
      "Apple44": null, 
      "Apple45": null, 
      "Apple47": null, 
      "Apple48": null, 
      "Apple49": null, 
      "Apple50": null, 
      "Apple51": null, 
      "Apple52": null, 
      "Apple53": null, 
      "Apple54": null, 
      "Apple55": null, 
      "Apple56": null, 
      "Apple57": null, 
      "Apple58": null, 
      "Apple59": null, 
      "Microsoft": null, 
      "Google": 'http://placehold.it/250x250' 
     } 
    }); 

});  

Просьба предложить способ удаления этого пустого пространства.

Примечание: Это прекрасно работает в хроме

ответ

1

Похоже ошибка в IE.This ниже части дополнительных обработчиков могут быть добавлены.

$('.autocomplete-content').on('click', 'li', function() {    
    $('.autocomplete-content').hide(); 
}); 

$('input.autocomplete').on('keyup',function(){ $('.autocomplete-content').show();}) 

Этот код показывает только раскрывающееся меню Keyup и скрывает его при выборе.

Codepen: http://codepen.io/anon/pen/jrJEjZ?editors=1111