自定义下拉搜索栏无处不在IE浏览器

Posted 2021-03-31

我刚刚进入javascript和Web开发，作为一个以前的.NET桌面应用程序的人，我正在努力找出导致我的问题的Internet Explorer（不工作11）。任何人都可以对此有所了解吗？

非常感谢任何帮助！还有关于如何避免支持IE的建议。

在IE11中调试时我的搜索过滤器出现错误：“对象不支持属性或方法'包含'”

// check for min length
if (filter.length < 3) {
    $('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
} else {
    for (i = 0; i < count; i++) {
        if (playerDatabase[i].name.toUpperCase().includes(filter)) {
            $('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + playerDatabase[i].playerID +"'>" + playerDatabase[i].name + " - " + playerDatabase[i].pos + "</a></li>");
        }
    }
}

完整片段

var playerDatabase = [];
var count;

// Data Load Event
function showModal() {

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      playerDatabase = JSON.parse(this.responseText);
      count = $(playerDatabase).toArray().length;
    }
  };

  var requestURL = 'https://raw.githubusercontent.com/maat7043/sportssabermetrics/master/playerDatabase.json';
  xmlhttp.open("GET", requestURL, true);
  xmlhttp.send();
};


// Search Bar Filter Logic
function searchPlayers() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("searchBarInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("dropdownItems");
  li = div.getElementsByTagName("li");

  // remove all current items
  for (i = li.length - 1; i > -1; i--) {
    div.removeChild(li[i]);
  }

  // check for min length
  if (filter.length < 3) {
    $('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
  } else {
    for (i = 0; i < count; i++) {
      if (playerDatabase[i].name.toUpperCase().includes(filter)) {
        $('#dropdownItems').append("<li><a href=http://www.sportssabermetrics.net/html/player-analyzer/playerPage.html?playerID=" + playerDatabase[i].playerID + ">" + playerDatabase[i].name + " - " + playerDatabase[i].pos + "</a></li>");
      }
    }
  }
}

// Search Bar focus lost
$(document).on("focusout", "#searchBarInput input", function() {
  var div = document.getElementById("dropdownItems");
  var li = div.getElementsByTagName("li");

  // remove all current items
  for (i = li.length - 1; i > -1; i--) {
    div.removeChild(li[i]);
  }
});

/* * Copyright (c) 2012 Thibaut Courouble
 * Licensed under the MIT License
   ================================================== */

a {
  color: #1e7ad3;
  text-decoration: none;
  font-size: 12px;
}

a:hover {
  text-decoration: underline
}

input {
  font-size: 13px;
  color: white;
}

.search {
  position: relative;
  margin: 0 auto;
}

.search input {
  height: 26px;
  width: 100%;
  padding: 0 12px 0 25px;
  background: #555860;
  border-width: 1px;
  border-style: solid;
  border-color: #a8acbc #babdcc #c0c3d2;
  border-radius: 13px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
  box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}

.search input:focus {
  outline: none;
  border-color: #66b1ee;
  -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
  box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}

.search input:focus+.results,
.search .results:hover {
  display: block
}

.search .results {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #cbcfe2 #c8cee7 #c4c7d7;
  border-radius: 3px;
  background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
  background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
  background-image: linear-gradient(top, #fdfdfd, #eceef4);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search .results li {
  display: block;
}

.search .results li:first-child {
  margin-top: -1px
}

.search .results li:first-child:before,
.search .results li:first-child:after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  border: 5px outset transparent;
}

.search .results li:first-child:before {
  border-bottom: 5px solid #c4c7d7;
  top: -11px;
}

.search .results li:first-child:after {
  border-bottom: 5px solid #fdfdfd;
  top: -10px;
}

.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
  display: none
}

.search .results li:last-child {
  margin-bottom: -1px
}

.search .results a {
  display: block;
  position: relative;
  margin: 0 -1px;
  padding: 6px 40px 6px 10px;
  color: #808394;
  text-color: #808394;
  font-weight: 500;
  text-shadow: 0 1px #fff;
  border: 1px solid transparent;
  border-radius: 3px;
}

.search .results a span {
  font-weight: 200
}

.search .results a:before {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -9px;
}

.search .results a:hover {
  text-decoration: none;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border-color: #2380dd #2179d5 #1a60aa;
  background-color: #338cdf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
  background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
  background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
  background-image: linear-gradient(top, #59aaf4, #338cdf);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

:-moz-placeholder {
  color: #a7aabc;
  font-weight: 200;
}

::-webkit-input-placeholder {
  color: #a7aabc;
  font-weight: 200;
}

.lt-ie9 .search input {
  line-height: 26px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<head>
  <title>Sports Sabermetrics</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/ico" href="http://www.sportssabermetrics.net/html/images/icon.png">

  <!-- W3 Schools CSS -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.0.0-18/css/ionicons.min.css" rel="stylesheet">
</head>

<body onpageshow="showModal()" style="background-color: black;">
  <div class="top-bar no-padding" style="height: 100vh; background-image: url(http://www.sportssabermetrics.net/html/images/header_image.jpg); background-size: cover;">
    <div class="w3-display-middle w3-center" style="width:60%;">
      <!-- Search Bar -->
      <section class="main">
        <div id="myDropdown" style="margin: auto; font-size: 14px;">
          <form class="search" method="post"><input type="text" id="searchBarInput" placeholder="Search for NFL Player" onkeyup="searchPlayers()"/>
            <ul id="dropdownItems" class="results">
            </ul>
          </form>
        </div>
      </section>
    </div>
  </div>
</body>

</html>

答案

根据docs，IE不支持includes方法。您可以使用indexOf代替：

if (playerDatabase[i].name.toUpperCase().indexOf(filter) >= 0) { ... }

欢迎来到浏览器兼容性问题的精彩世界;）