原生js实现下拉框，支持多选、搜索

黑色是一种幽默

已于 2023-12-21 20:18:51 修改

阅读量2.2k

点赞数 4

于 2023-10-07 15:03:47 首次发布

本文链接：https://blog.csdn.net/shikaixina/article/details/133640008

版权

原生js实现下拉框，支持多选、搜索

就是一些事件绑定，话不多说上代码。

使用起来的话就调用init方法
1.搜索框与选中结果同框

<!--
 * @Description: 
 * @Autour: lkx
 * @Date: 2023-10-07 13:47:03
 * @LastEditors: lkx
 * @LastEditTime: 2023-12-21 20:17:25
-->
<!DOCTYPE html>
<html>

<head>
  <style>
    .custom-select {
      width: 260px;
      position: relative;
      display: flex;
      align-items: flex-start;
      border: 1px solid #999;
      border-radius: 5px;
    }

    .custom-select-content {
      width: 100%;
      min-height: 32px;
      max-height: 120px;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .select-input {
      width: 254px;
      height: 26px;
      margin-right: 20px;
      border: none;
    }

    .select-input:focus {
      outline: none;
    }

    .select-result-label {
      display: block;
      height: 32px;
      line-height: 32px;
    }

    .select-list {
      position: absolute;
      left: 0;
      bottom: 0;
      transform: translateY(110%);
      width: 260px;
      min-height: 32px;
      max-height: 120px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid #999;
      border-radius: 5px;
    }

    .select-list div {
      padding: 2px 4px;
      box-sizing: border-box;
    }

    .select-list div:hover {
      background-color: #eee;
      cursor: pointer;
    }

    .selected {
      color: blue;
    }

    .select-result {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
    }

    .select-result div {
      height: 26px;
      border: 1px solid #999;
      border-radius: 5px;
      padding: 3px;
      margin: 3px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .select-result div span:last-of-type {
      display: inline-block;
      border: 1px solid #999;
      height: 8px;
      width: 8px;
      border-radius: 100%;
      padding: 2px;
      line-height: 7px;
      text-align: center;
      font-size: 12px;
      margin-left: 3px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="custom-select">
    <div class="custom-select-content">
      <div class="select-result select-box "></div>
      <input type="text" class="select-input" placeholder="搜索">
    </div>
    <div class=" select-list select-box " style=" display: none;"></div>
  </div>


  <script>
    const selectContent = document.querySelector('.custom-select .custom-select-content')
    const selectInput = document.querySelector('.custom-select .custom-select-content .select-input')
    const selectList = document.querySelector('.custom-select .select-list')
    const selectResult = document.querySelector('.custom-select .custom-select-content .select-result')

    let selectInputBlurTimes = null
    let selectDataHit = []
    let selectDataAll = []

    // 事件绑定
    selectInput.addEventListener('input', () => {
      const elList = Array.from(selectList.querySelectorAll('div'))
      selectList.style.display = (!selectInput.value || elList.findIndex(item => item.textContent.includes(selectInput.value)) !== -1) ? 'block' : 'none'
      Array.from(selectList.querySelectorAll('div')).forEach(item => {
        item.style.display = (!selectInput.value || item.textContent.includes(selectInput.value)) ? 'block' : 'none'
      })
    })
    document.addEventListener('click', e => {
      selectList.style.display = e.target.className.includes('select-input') || e.target.className.includes('select-list') || e.target.className.includes('select-result-close') || (e.target.offsetParent && e.target.offsetParent.className.includes('select-list')) ? 'block' : 'none'
    })
    selectContent.addEventListener('click', e => {
      selectInput.focus()
      selectList.style.display = 'block'
      selectInput.scrollIntoView({ behavior: 'smooth', block: 'center' })
      e.stopPropagation()
    })

    // 生成下拉列表
    const createSelectList = (content) => {
      const div = document.createElement('div')
      div.addEventListener('click', () => {
        if (selectDataHit.includes(content.value)) {
          selectDataHit.splice(selectDataHit.indexOf(content.value), 1)
          Array.from(selectResult.querySelectorAll('div span')).find(item => item.textContent === content.label).parentNode.remove()
          div.classList.remove('selected')
        } else {
          selectDataHit.push(content.value)
          createSelectResult(content)
          div.classList.add('selected')
        }
      })
      div.textContent = content.label
      selectList.append(div)
    }

    // 生成选中列表
    const createSelectResult = (content) => {
      const div = document.createElement('div')
      const span = document.createElement('span')
      span.textContent = "x"
      span.className = 'select-result-close'
      span.addEventListener('click', () => {
        selectDataHit.splice(selectDataHit.indexOf(content.value), 1)
        selectList.querySelectorAll('div')[selectDataAll.findIndex(item => item.value === content.value)].classList.remove('selected')
        div.remove()
      })

      div.innerHTML = `
				<span>${content.label}</span>
			`
      div.append(span)
      selectResult.append(div)
      selectInput.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }

    // 初始化
    const init = () => {
      selectDataAll = [{ label: '111111', value: 111111 }, { label: '222222', value: 222222 }, { label: '333333', value: 333333 }, { label: '444444', value: 444444 }, { label: '5555555', value: 5555555 }, { label: '666666', value: 1116111 }, { label: '1111711', value: 1111711 }, { label: '1111181', value: 1118111 }, { label: '1111191', value: 1911111 },]
      selectDataAll.forEach(item => {
        createSelectList(item)
      })
    }

    init()
  </script>
</body>

</html>

2.输入框与选中结果分离

<!--
 * @Description: 
 * @Autour: lkx
 * @Date: 2023-10-07 13:47:03
 * @LastEditors: lkx
 * @LastEditTime: 2023-10-07 14:30:17
-->
<!DOCTYPE html>
<html>

<head>
  <style>
    .custom-select {
      position: relative;
      display: flex;
      align-items: flex-start;
    }

    .select-input {
      width: 254px;
      height: 26px;
      margin-right: 20px;
    }

    .select-box {
      width: 260px;
      min-height: 32px;
      max-height: 120px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid #999;
      border-radius: 5px;
    }

    .select-result-label {
      display: block;
      height: 32px;
      line-height: 32px;
    }

    .select-list {
      position: absolute;
      left: 0;
      top: 40px;

    }

    .select-list div {
      padding: 2px 4px;
      box-sizing: border-box;
    }

    .select-list div:hover {
      background-color: #eee;
      cursor: pointer;
    }

    .selected {
      color: blue;
    }

    .select-result {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
    }

    .select-result div {
      height: 26px;
      border: 1px solid #999;
      border-radius: 5px;
      padding: 3px;
      margin: 3px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .select-result div span:last-of-type {
      display: inline-block;
      border: 1px solid #999;
      height: 8px;
      width: 8px;
      border-radius: 100%;
      padding: 2px;
      line-height: 7px;
      text-align: center;
      font-size: 12px;
      margin-left: 3px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="custom-select">
    <input type="text" class="select-input" placeholder="搜索">
    <div class="select-list select-box " style="display: none;"></div>
    <span class="select-result-label">选中结果：</span>
    <div class="select-result select-box "></div>
  </div>


  <script>
    const selectInput = document.querySelector('.custom-select .select-input')
    const selectList = document.querySelector('.custom-select .select-list')
    const selectResult = document.querySelector('.custom-select .select-result')

    let selectInputBlurTimes = null
    let selectDataHit = []
    let selectDataAll = []

    // 事件绑定
    selectInput.addEventListener('input', () => {
      const elList = Array.from(selectList.querySelectorAll('div'))
      selectList.style.display = (!selectInput.value || elList.findIndex(item => item.textContent.includes(selectInput.value)) !== -1) ? 'block' : 'none'
      Array.from(selectList.querySelectorAll('div')).forEach(item => {
        item.style.display = (!selectInput.value || item.textContent.includes(selectInput.value)) ? 'block' : 'none'
      })
    })
    document.addEventListener('click', e => {
      selectList.style.display = e.target.className.includes('select-input') || e.target.className.includes('select-list') || e.target.className.includes('select-result-close') || (e.target.offsetParent && e.target.offsetParent.className.includes('select-list')) ? 'block' : 'none'
    })

    // 生成下拉列表
    const createSelectList = (content) => {
      const div = document.createElement('div')
      div.addEventListener('click', () => {
        if (selectDataHit.includes(content.value)) {
          selectDataHit.splice(selectDataHit.indexOf(content.value), 1)
          Array.from(selectResult.querySelectorAll('div span')).find(item => item.textContent === content.label).parentNode.remove()
          div.classList.remove('selected')
        } else {
          selectDataHit.push(content.value)
          createSelectResult(content)
          div.classList.add('selected')
        }
      })
      div.textContent = content.label
      selectList.append(div)
    }

    // 生成选中列表
    const createSelectResult = (content) => {
      const div = document.createElement('div')
      const span = document.createElement('span')
      span.textContent = "x"
      span.className = 'select-result-close'
      span.addEventListener('click', () => {
        selectDataHit.splice(selectDataHit.indexOf(content.value), 1)
        selectList.querySelectorAll('div')[selectDataAll.findIndex(item => item.value === content.value)].classList.remove('selected')
        div.remove()
      })

      div.innerHTML = `
				<span>${content.label}</span>
			`
      div.append(span)
      selectResult.append(div)
    }

    // 初始化
    const init = () => {
      selectDataAll = [{ label: '111111', value: 111111 }, { label: '222222', value: 222222 }, { label: '333333', value: 333333 }, { label: '444444', value: 444444 }, { label: '5555555', value: 5555555 }, { label: '666666', value: 1116111 }, { label: '1111711', value: 1111711 }, { label: '1111181', value: 1118111 }, { label: '1111191', value: 1911111 },]
      selectDataAll.forEach(item => {
        createSelectList(item)
      })
    }

    init()
  </script>
</body>

</html>