<!--弹窗-->
<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
网友评论