datalist元素与输入匹配列表演示页面

展示

代码

• HTML：

  <h4 class="fill">1. 静态匹配</h4>
  账号：<input list="data" placeholder="手机号、昵称或邮箱">
  <datalist id="data">
      <option value="13208033621">
      <option value="zhangxinxu">
      <option value="iamzhangxinxu@qq.com">
      <option value="test">
      <option value="abcdefg">
  </datalist>
  
  <h4 class="fill">2. 动态匹配</h4>
  邮箱：<input id="input" type="email" list="mails" placeholder="输入邮箱">
  <datalist id="mails"></datalist>
  
  <h4 class="fill">3. 时间选择</h4>
  会议时间：<input type="time" list="hours" />
  <datalist id="hours">
    <option value="12:00"></option>
    <option value="13:00"></option>
    <option value="14:00"></option>
  </datalist>
  
  <h4 class="fill">4. 范围选择推荐值</h4>
  字号：<input type="range" list="fonts" min="12" max="24" value="16">px
  <datalist id="fonts">
    <option value="14"></option>
    <option value="16"></option>
    <option value="18"></option>
    <option value="20"></option>
  </datalist>
  
  <h4 class="fill">5. 颜色选择推荐值</h4>
  口红色：<input type="color" list="redColors" value="#cd1111">
  <datalist id="redColors">
    <option value="#800000"></option>
    <option value="#8B0000"></option>
    <option value="#A52A2A"></option>
    <option value="#DC143C"></option>
  </datalist>

• JS：

  input.addEventListener('input', function () {
      const value = this.value.split('@')[0];
      const datalist = this.list;
      const arr = ['qq.com', 'gmail.com', '126.com', '163.com'];
      let html = '';
      arr.forEach(email => {
          html += `<option value="${value}@${email}">`;
      });
      datalist.innerHTML = html;
  });