jQuery搜索框下拉菜单选择

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<h2> Demo</h2>

<br>

<div class="row">

 <div class="col-sm-4">

  <div class="text-info">多选、JSON渲染、分组功能</div>

  <br>

  <div class="dropdown-mul-1">

   <select style="display:none" name="" id="" multiple placeholder="请选择">

   </select>

  </div>

 </div>

</div>

<br>

<br>

<div class="row">

 <div class="col-sm-4">

  <div class="text-info">多选、Option渲染</div>

  <br>

  <div class="dropdown-mul-2">

   <select style="display:none" name="" id="mul-2" multiple placeholder="请选择">

    <option value="1" selected>1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

    <option value="5">5</option>

    <option value="3" selected>我是默认选中的</option>

    <option value="4" disabled>4</option>

    <option value="5">5</option>

    <option value="6">6</option>

   </select>

  </div>

 </div>

</div>

<br>

<br>

<div class="row">

 <div class="col-sm-4">

  <div class="text-info">单选模式，Option渲染</div>

  <br>

  <div class="dropdown-sin-1">

   <select style="display:none" placeholder="请选择：测试placeholder">

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

    <option value="5">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

    <option value="8">8</option>

    <option value="9">9</option>

    <option value="10">10</option>

    <option value="11">11</option>

    <option value="12">12</option>

   </select>

  </div>

 </div>

</div>

<br>

<br>

<div class="row">

 <div class="col-sm-4">

  <div class="text-info">10000 条数据搜索测试</div>

  <br>

  <div class="dropdown-sin-2">

   <select style="display:none" multiple placeholder="请选择：测试placeholder">

   </select>

  </div>

 </div>

</div>

</div>

4、书写css代码。

.popover.top { margin-top: -10px }

.popover.right { margin-left: 10px }

.popover.bottom { margin-top: 10px }

.popover.left { margin-left: -10px }

.popover-title { padding: 8px 14px; margin: 0; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0 }

.popover-content { padding: 9px 14px }

.popover>.arrow, .popover>.arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid }

.popover>.arrow { border-width: 11px }

.popover>.arrow:after { content: ""; border-width: 10px }

.popover.top>.arrow { bottom: -11px; left: 50%; margin-left: -11px; border-top-color: #999; border-top-color: rgba(0,0,0,.25); border-bottom-width: 0 }

.popover.top>.arrow:after { bottom: 1px; margin-left: -10px; content: " "; border-top-color: #fff; border-bottom-width: 0 }

.popover.right>.arrow { top: 50%; left: -11px; margin-top: -11px; border-right-color: #999; border-right-color: rgba(0,0,0,.25); border-left-width: 0 }

.popover.right>.arrow:after { bottom: -10px; left: 1px; content: " "; border-right-color: #fff; border-left-width: 0 }

.popover.bottom>.arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0,0,0,.25) }

.popover.bottom>.arrow:after { top: 1px; margin-left: -10px; content: " "; border-top-width: 0; border-bottom-color: #fff }

.popover.left>.arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0,0,0,.25) }

.popover.left>.arrow:after { right: 1px; bottom: -10px; content: " "; border-right-width: 0; border-left-color: #fff }

.carousel { position: relative }

.carousel-inner { position: relative; width: 100%; overflow: hidden }

.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left }

5、书写并添加js代码。

<script>

var Random = Mock.Random;

var json1 = Mock.mock({

  "data|10-50": [{

name: function() {

 return Random.name(true)

},

"id|+1": 1,

"disabled|1-2": true,

groupName: '分组名',

"groupId|1-4": 1,

"selected": false

  }]

});

$('.dropdown-mul-1').dropdown({

  data: json1.data,

  limitCount: 40,

  multipleMode: 'label',

  choice: function() {

// console.log(arguments,this);

  }

});

var json2 = Mock.mock({

  "data|10000-10000": [{

name: function() {

 return Random.name(true)

},

"id|+1": 1,

"disabled": false,

groupName: '分组名',

"groupId|1-4": 1,

"selected": false

  }]

});

$('.dropdown-mul-2').dropdown({

  limitCount: 5,

  searchable: false

});

$('.dropdown-sin-1').dropdown({

  readOnly: true,

  input: '<input type="text" maxLength="20" placeholder="请输入搜索">'

});

$('.dropdown-sin-2').dropdown({

  data: json2.data,

  input: '<input type="text" maxLength="20" placeholder="请输入搜索">'

});

</script>

6、代码整体结构。

7、查看效果。