html+js实现对数组的模糊搜索

最新推荐文章于 2024-09-12 10:42:05 发布

Monn.

最新推荐文章于 2024-09-12 10:42:05 发布

阅读量304

点赞数 6

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/LY_LM/article/details/139923567

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先展示一下效果吧：（输入列表中有的会显示列表，如果输入的第一个字列表搜索不到就不会显示模糊搜索结果列表。根据输入的信息动态的搜索匹配的结果。点击列表显示在输入框内）

html部分：

<div class="search">
        <div class="sear-title">
            <p>车辆轨迹查看</p>
        </div>
        <div class="sear-content">
            <div class="carId" id="carId">
                车牌号：<input type="text" placeholder="请输入车牌号" id="vehicle_no">
                <div class="disnone" id="vehicleList">
                    <ul id="itemlist">
                    </ul>
                </div>
            </div>
            <div class="sear-time">
                开始时间：<input type="datetime-local" id="timeStart" value="选择时间段" style="width: 141px;">
            </div>
            <div class="sear-last">
                时段：<!-- ##b3dbf9 -->
                <select id="search-date" placeholder="选择时间段" style="width: 141px;">
                    <option value="" disabled selected hidden>选择时间段</option>
                    <option value="5">近5分钟</option>
                </select>
            </div>
            <button type="submit">搜索 <img src="img/sousuo.png" alt=""></button>
        </div>
        <div id="sear" class="sear-result">
            <div class="txt">搜索结果</div>
            <div class="clear"><img src="img/清空icon.png" alt=""></div>
        </div>
    </div>

js部分代码：

$('#vehicle_no').on('input', function () {
        var vehicleInput = $(this).val().toLowerCase().trim();
        var filteredArray = vehicleList.filter(function (item) {
            return item.toLowerCase().includes(vehicleInput);
        });

        var $itemlist = $('#itemlist');
        $itemlist.empty(); // 清空列表

        filteredArray.forEach(function (item) {
            $itemlist.append('<li>' + item + '</li>'); // 将筛选结果添加到列表中
        });

        if (vehicleInput === '' || filteredArray.length === 0) {
            $('#vehicleList').addClass('disnone'); // 输入框内容为空或者未匹配到结果时隐藏列表
        } else {
            $('#vehicleList').removeClass('disnone'); // 显示列表
        }
    });

    $('#vehicle_no').focus(function () {
        if ($(this).val().trim() !== '') {
            $('#vehicleList').removeClass('disnone'); // 如果有输入内容则显示列表
        }
    });
    // 使用事件委托方式绑定点击事件
    $('#itemlist').on('click', 'li', function () {
        var selectedValue = $(this).text();
        $('#vehicle_no').val(selectedValue);
        console.log(selectedValue);
        $('#vehicleList').addClass('disnone'); // 点击列表项后隐藏列表
    });
});

$(document).on('click', function (event) {
    // 检查点击的元素是否不在 #carId 内部或 #vehicleList 内部
    if (!$(event.target).closest('#carId').length) {
        // 如果不在内部，则隐藏 #vehicleList
        $('#vehicleList').addClass('disnone');
    }
});

// vehicleList就是需要进行模糊搜索的列表