自定义下拉搜索栏仅IE11失效，求助排查及IE兼容建议

Hey Matt! As someone who made the jump from .NET desktop dev to web dev, I totally get how frustrating IE11 compatibility issues can be—let's sort this out together.

为什么会出现这个错误？ #

IE11 is a super outdated browser that has zero support for the ES2015 (ES6) includes() method. Whether you're using Array.prototype.includes or String.prototype.includes, IE11 doesn't recognize either, hence the "Object doesn't support property or method 'includes'" error you're seeing.

快速修复方法 #

There are two straightforward ways to fix this:

1. Add a Manual Polyfill

Drop this code at the very top of your global JS file to patch the missing includes() functionality for IE11:

// Polyfill for Array.prototype.includes
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    const o = Object(this);
    const len = o.length >>> 0;
    if (len === 0) return false;
    
    const n = fromIndex | 0;
    const k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    
    function sameValueZero(x, y) {
      return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
    }
    
    while (k < len) {
      if (sameValueZero(o[k], searchElement)) return true;
      k++;
    }
    return false;
  };
}

// Polyfill for String.prototype.includes
if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    const startIndex = typeof start !== 'number' ? 0 : start;
    if (startIndex + search.length > this.length) return false;
    return this.indexOf(search, startIndex) !== -1;
  };
}

2. Use IE11-Native Alternative Syntax

If you'd rather skip polyfills, replace all instances of includes() with indexOf(), which IE11 fully supports:

• For arrays: Swap myArray.includes('target') with myArray.indexOf('target') !== -1
• For strings: Swap myString.includes('subtext') with myString.indexOf('subtext') !== -1

Example:

// Original (IE11 incompatible)
if (userRoles.includes('admin')) { /* do something */ }

// IE11-friendly replacement
if (userRoles.indexOf('admin') !== -1) { /* do something */ }

IE11 Compatibility Pitfalls to Avoid #

As a new web dev coming from .NET, these tips will save you tons of headaches:

• Stick to ES5 syntax first: Avoid arrow functions () => {}, let/const (use var instead), template strings `Hello ${name}` (use string concatenation 'Hello ' + name), and destructuring—none of these work in IE11.
• Use a polyfill library: Instead of writing polyfills manually, use a robust library like core-js to automatically patch all missing ES6+ APIs for IE11.
• Transpile code with Babel: If you're writing ES6+ code, use Babel to convert it to ES5 that IE11 can understand. Integrate it with your build tool (like Webpack) for seamless workflow.
• Test directly in IE11: Never rely solely on modern browsers for testing. Use IE11's built-in dev tools (hit F12) to debug—it works similarly to the debugging tools you're used to in .NET.
• Avoid modern Web APIs: Replace fetch with XMLHttpRequest, add a polyfill for Promise, and patch DOM methods like closest()—all of these are missing in IE11.
• Choose framework versions carefully: If using React/Vue, double-check compatibility: Vue 2 supports IE11, but Vue 3 does not; React 17 and below work with IE11 when paired with Babel and polyfills.

内容的提问来源于stack exchange，提问作者Matt