美文网首页
jQuery 前端搜索框

jQuery 前端搜索框

作者: fourn熊能 | 来源:发表于2019-10-23 11:44 被阅读0次
    <!--弹窗-->
    <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 前端搜索框

          本文链接:https://www.haomeiwen.com/subject/yhohvctx.html