使 select 滑动框 带搜索功能

引入了 select2 插件

// 线上引用
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

select 滑动框

<div class="aui-form-group clear">
         <label class="aui-label-control">词牌名 <em>*</em></label>
         <div class="aui-form-input">
         		// 这只需要 给 select 滑动框 添加 class="select2"
                 <select  name="pid" id="area" size="15" class="select2">
			            // 遍历显示滑动框内容
                        {volist name="alist" id="vo" size="5"}
                              <option value="{$vo['id']}">   
                            		 {$vo['name']}
                              </option>
                         {/volist}

                   </select> <br /> 
                    </div>
 </div>

js 中

<script type="text/javascript">
    //页面加载完成后初始化select2控件
    $(function () {
         $("#area").select2();
    });
</script>

这样通过这3步，就可以完成搜索功能了，想知道选中的值，只需要后台接收的时候打印 name 值pid 即可知道，选中的是哪个数据 id