搜索框提示内容

本文主要是介绍搜索框提示内容，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这里是html文件

<div>
    <input id="ipt" class="ipt1" type="text">
    <button id="btn">X</button>
    <!-- 内容 -->
    <div id="div">
      <ul>
        <li>下拉列表怎么设置</li>
        <li>下拉列表里面的内容怎么添加</li>
        <li>下拉列表怎么删除</li>
        <li>下拉列表的内容显示不出来</li>
        <li>下拉列表怎么多选</li>
        <li>下拉列表栏拉不出来</li>
        <li>下拉列表怎么复制到另一个表格中</li>
        <li>下拉列表不显示</li>
        <li>下拉列表，用户更改表单元素</li>
      </ul>
    </div>
  </div>

这里是css文件

<style>
    * {
      box-sizing: border-box;
    }

    .ipt1 {
      width: 50vw;
      border: 1px solid cyan;
      outline: none;
      padding: 1rem;
    }

    div {
      position: relative;
      width: 53.5vw;
    }

    #btn {
      border: none;
      background-color: transparent;
      position: absolute;
      top: 13px;
      right: 40px;
      display: none;
      z-index: 1;
    }

    div div {
      width: 93.4%;
      height: 300px;
      background-color: #FFF;
      border: 2px solid #315EFB;
      border-top: 2px solid #ccc;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      position: absolute;
      top: 48px;
      display: none;
    }

    div div ul li {
      list-style: none;
      line-height: 1.75rem;
      transition: .4s;
      width: 100%;
    }

    div div ul {
      position: absolute;
      width: 100%;
      /* left: -20px; */
      padding: 0;
    }

    div div ul li:hover {
      background-color: #F5F5F6;
      color: #315EFB;
    }

    .e2 {
      border: 2px solid #315EFB;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  </style>

这里是js文件

<script>
  document.getElementById('ipt').oninput = () => {
    // 获取 iptut 输入的内容
    let e = document.getElementById('ipt').value
    // 获取按钮
    let c = document.getElementById('btn')
    // 判断 iptut 输入的内容 是否等于 下拉列表
    if (e === '下拉列表') {
      // 获取div id 让他显示
      document.getElementById('div').style.display = 'block'
      // e.classList.add('e2')
    }
    if (e !== '') {
      // 让按钮显示
      c.style.display = 'block'
    } else if (e == '') {
      // 让按钮隐藏
      // e.classList.remove('e2')
      c.style.display = 'none'
    }
    c.onclick = () => {
      document.getElementById('div').style.display = 'none'
      // 让你内容清空
      document.getElementById('ipt').value = ''
      btn.style.display = 'none'
    }
  }
</script>

这篇关于搜索框提示内容的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！