php下拉菜单 模糊查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊查询示例</title>
    <script>
        function searchOptions() {
            var input, filter, ul, li, a, i, txtValue;
            input = document.getElementById('searchInput');
            filter = input.value.toUpperCase();
            ul = document.getElementById('dropdownMenu');
            li = ul.getElementsByTagName('li');
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                txtValue = a.textContent || a.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="searchInput" onkeyup="searchOptions()" placeholder="搜索...">
    <ul id="dropdownMenu">
        <li><a href="#">Apple</a></li>
        <li><a href="#">Banana</a></li>
        <li><a href="#">Cherry</a></li>
        <li><a href="#">Date</a></li>
        <li><a href="#">Elderberry</a></li>
    </ul>
</body>
</html>

<?php
// 假设我们有一个包含选项的数组
$options = [
    "Apple",
    "Banana",
    "Cherry",
    "Date",
    "Elderberry"
];

// 获取用户输入的搜索关键词
$searchQuery = $_GET['search'] ?? '';

// 进行模糊查询
$filteredOptions = array_filter($options, function($option) use ($searchQuery) {
    return stripos($option, $searchQuery) !== false;
});

// 输出结果
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊查询示例</title>
</head>
<body>
    <form method="get" action="">
        <input type="text" name="search" placeholder="搜索...">
        <button type="submit">搜索</button>
    </form>
    <ul>
        <?php foreach ($filteredOptions as $option): ?>
            <li><?php echo htmlspecialchars($option); ?></li>
        <?php endforeach; ?>
    </ul>
</body>
</html>