Jquery库实现select输入模糊查询

Jquery库实现select输入模糊查询

引入Jquert 下载jquery库

效果：

<script type="text/javascript" src="/serachalbelSelect/jquery.searchableSelect.js"></script>
<link href="/serachalbelSelect/searchableSelect.css" rel="stylesheet">

循环获取数据

                        <div class="form-group">
                            <label class="col-sm-3 control-label">直推人：</label>
                            <div class="col-sm-8">
                                <select name="pushId" id="pushId" width="200px">
                                    <option th:each="m : ${memberManagers}"
                                            th:value = "${m.id}"
                                            th:selected="${m.id} eq ${memberManager.pushId}"
                                            th:text="|直推人账号： ${m.accountNum}
                                                      直推人手机号： ${m.memberPhone}|"
                                            >
                                    </option>
                                </select>
                            </div>
                        </div>

JS

<script type="text/javascript">
$(function(){
	$("#pushId").searchableSelect();
});
</script>