引入了 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