<!--彈窗-->
<aside class="winbg" id="set_school" @if(!session()->has('school_id')) style="display: block;" @endif>
    <div class="winbgclick"></div>
    <div class="schoolcheck">
        <!--<h2>選擇您所在的學(xué)校</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="請(qǐng)輸入" 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');
            //列表項(xiàng)數(shù)組  包列表項(xiàng)的id、內(nèi)容、元素
            let listArr = [];
            //遍歷列表，將列表信息存入listArr中
            $.each(list, function (index, item) {
                let obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
                listArr.push(obj);
            });
            //current用來(lái)記錄當(dāng)前元素的索引值
            let current = 0;
            //showList為列表中和所輸入的字符串匹配的項(xiàng)
            let showList = [];
            //為文本框綁定鍵盤(pán)引起事件
            let flag = false;
            let doThing = function (_this){
                //列表框顯示
                $('#' + listId).show();
                //文本框中輸入的字符串
                const searchVal = $(that).val().replace(' ', '');
                showList = [];
                //將和所輸入的字符串匹配的項(xiàng)存入showList
                //將匹配項(xiàng)顯示，不匹配項(xiàng)隱藏
                $.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