如何解決這個空白列表出現在materializecss自動完成？（Internet Explorer）

當自動完成列表很大時，我得到一個空白的div出現在Internet Explorer中。對於小列表，它工作正常。如何解決這個空白列表出現在materializecss自動完成？（Internet Explorer）

重現步驟： -

入住此codepen： - codepenForBlankListInMaterializeAutocomplete在Internet Explorer的（9.11版本）。
在文本框中寫入A.
觀察Apple/Apple00/Apple01 ....出現在列表中。
選擇Apple
觀察空白列表即將到來。

頭部： -

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

});

請建議一種消除這種空白空間的方法。

注：本作品在鍍鉻細

來源

2016-10-24 Ankush Roy

好像可以加入下一塊額外的處理IE.This的錯誤。

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

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

此代碼只顯示Keyup上的下拉列表並將其隱藏在select上。

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

來源

2016-10-24 20:45:47

如何解決這個空白列表出現在materializecss自動完成？（Internet Explorer）

回答

相關問題