大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:
那么这里可以得知,选中不同下拉选项请求接口带个type参数返回不同结果,并动态加入select框中。我写了个searchKeywords函数,方便调用。
html源码:
<div id="isShowDIv"> <div class="control-group"> <label class="control-label">类型限制</label> <div class="controls"> <input class="span1" type="hidden" value="{$coupon.restrict_type}" name="restrict_type_defult" id="restrict_type_defult" > <select tabindex="1" name="restrict_type" class="span1 view_topCate" data-placeholder="Select here.." onchange="ShowImage2(parseInt(this.value), 'restricttype');" > <option value="1" <if condition=" $coupon.restrict_type eq 1 "> selected</if> >专题</option> <option value="2" <if condition=" $coupon.restrict_type eq 2 "> selected</if> >分类</option> <option value="3" <if condition=" $coupon.restrict_type eq 3 "> selected</if> >品牌</option> <option value="4" <if condition=" $coupon.restrict_type eq 4 "> selected</if> >商城</option> </select> <input id="searchInput" class="span2" type="text" name="keywords" value="" placeholder="请搜索关键词"> <input class="span1" type="button" value="查询" id="searchBtn"> </div> </div> <div class="control-group" style="display:block" id="restricttype1"> <label class="control-label">专题</label> <div class="controls"> <select id="brandListResult1" tabindex="1" class="brandListResult" name="restrict_seminar[]" data-placeholder="Select here.." class="span3" multiple="multiple"> <foreach name="seminar" item="co"> <option value="{$co.id}" <range name="co.id" value="$coupon.restrict_seminar" type="in" >selected</range> >{$co.name}</option> </foreach> </select> <div id="selectBtn"> <input type="button" value=" >> " onclick="moveOption(document.getElementById('brandListResult1'),document.getElementById('brandListRight1'))"><br><br> <input type="button" value=" << " onclick="moveOption(document.getElementById('brandListRight1'), document.getElementById('brandListResult1'))"> </div> <select multiple id="brandListRight1" name="restrict_seminar_new[]" ondblclick="moveOption(document.getElementById('brandListRight1'), document.getElementById('brandListResult1'))"> </select> <span class="help-inline" style="line-height:100px;color:red;">* 右侧为已选中项</span> </div> </div>
js代码:
function searchKeywords(){ var type=$('select[name=restrict_type] option:selected').val(); //下拉选中type var keywords=$('#searchInput').val(); //搜索的关键词 $.ajax({ type: "get", url:"?c=api&a=getSelectByKeywords", data: {type:type,keywords:keywords}, dataType: "json", success: function(data){ var html; $.each(data, function(i, obj) { html += '<option value="' + obj.id + '">' + obj.name + '</option>'; //循环遍历,拼接 }); $(".brandListResult").html(html);//动态插入html }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('搜索关键词出错'); } }); }
最后来个效果展示: