<!--弹窗-->
<aside class="winbg" id="set_school" @if(!session()->has('school_id')) style="display: block;" @endif>
<div class="winbgclick"></div>
<div class="schoolcheck">
<!--<h2>选择您所在的学校</h2>-->
<p class="box01">
<input type="submit" value="搜索" class="sub"/>
<input type="text" value="" list="school_list" id="school_name" onfocus="fuzzySearch.call(this)" placeholder="请输入" class="text"/>
@if(session('school_id'))
<span onclick="$(this).parent().parent().parent().fadeOut(200);">取消</span></p>
@endif
<div class="clear h11"></div>
<section id="school_list">
@foreach($schools as $school)
<a id="school_{{$school->id}}" href="{{ $school->setSchoolLink() }}" @if(session('school_id') == $school->id) class="sel" @endif >{{ $school->name }}</a>
@endforeach
</section>
</div>
</aside>
@section('script')
@parent
<script type="text/javascript">
function fuzzySearch(e) {
const that = this;
//获取列表的ID
let listId = $(this).attr("list");
//列表
let list = $('#' + listId + ' a');
//列表项数组 包列表项的id、内容、元素
let listArr = [];
//遍历列表,将列表信息存入listArr中
$.each(list, function (index, item) {
let obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
listArr.push(obj);
});
//current用来记录当前元素的索引值
let current = 0;
//showList为列表中和所输入的字符串匹配的项
let showList = [];
//为文本框绑定键盘引起事件
let flag = false;
let doThing = function (_this){
//列表框显示
$('#' + listId).show();
//文本框中输入的字符串
const searchVal = $(that).val().replace(' ', '');
showList = [];
//将和所输入的字符串匹配的项存入showList
//将匹配项显示,不匹配项隐藏
$.each(listArr, function (index, item) {
if (item.eleName.indexOf(searchVal) != -1) {
item.ele.style.display = "block";
showList.push(item.ele);
} else {
item.ele.style.display = 'none';
}
});
console.log(showList);
};
$(this).on('input propertychange', function (){
doThing(this);
});
}
</script>
@endsection
jQuery 前端搜索框
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 对于目标标签的选定。使用ID或者使用CLASS名称。 使用ID,其点击事件书写: $("#addBtn").cli...
- 这个插件可以把你指定的列表在搜索框输入的时候进行匹配过滤,让用户快速找到并从预选值中选择生产环境下载请点击下载注意...