时间戳

首页 > 解决方案 > 如何制作一个使用javascript搜索网站中特定字段的搜索栏？

javascript - 如何制作一个使用javascript搜索网站中特定字段的搜索栏？

问题描述

我正在尝试使用选择标签制作搜索栏。如果有人会点击任何选项，如 Bus driver，那么在评论框中将出现相同文本的字段。我正在使用 JavaScript、PHP 和 HTML 和 CSS。我正在尝试，但它不起作用。我有 index.php 和一个带有两个表的数据库。你也可以给我一个例子的代码。

我用于搜索栏的 javascript 代码：-

<script>
        const searchFun = () => {
            let select = document.getElementById('select_job');
            var x = select.val();
            let field = <?= $row['field'] ?>
            var y = field.val();

            if (x == y) {
                document.getElementById("mainContainer").innerHTML = "";
            } else {
                alert("Sorry no Jobs found")
            }
        }
    </script>

我的搜索条形码：-

<select id="select_job" class="label-field form-control" onkeyup="searchFun()" name="field">
    <option value="">Choose your field...</option>
    <option>Accountants</option>
    <option>Aerospace Engineers</option>
    <option> Biologist</option>
    <option> Black Belt</option>
    <option> Blender</option>
    <option> Bookkeeper</option>
    <option> Bookseller</option>
    <option> Branch Manager</option>
    <option> Brand Ambassador</option>
    <option> Brand Manager</option>
    <option> Budget Analyst</option>
    <option> Bus Driver</option>
    <option> Business Analyst</option>
    <option>Computer User Support Specialists</option>
    <option>Computer Systems Analysts</option>
    <option>Computer Programmers</option>
</select>

我的评论框代码：-

<div class="biggest-container">
    <div id="mainContainer" class="mainContainer-one" class="row justify-content-center">
        <div class="rounded bg-light p-3 static" class="position-static" id="cont">
            <?php
            $sql = "SELECT * FROM comment_table ORDER BY id DESC";
            $result = $conn->query($sql);
            while ($row = $result->fetch_assoc()) {
            ?>
                <div class="card mb-2 border-secondery" id="myTable">
                    <div class="card-header bg-secondary py-1 text-light">
                        <span id="fieldone" class="float-left font-bold fields">Field : <?= $row['field'] ?></span>
                        <span class="float-right font-bold">On : <?= $row['date_publish'] ?></span>
                    </div>
                    <div class="card-body py-2">
                        <p class="card-text font-bold"> Posted By : <?= $row['name'] ?></p>
                        <p class="card-text font-bold"><i class="fas fa-map-marker-alt color-light"></i> Location : <?= $row['location'] ?></p>
                        <p class="card-text font-bold show-read-more"> Description : <?= $row['description'] ?></p>
                        <p class="card-text font-bold"> E-mail : <?= $row['email'] ?></p>
                    </div>
                    <div class="card-footer py-2">
                        <div class="float-left">
                        </div>
                        <div class="float-right">
                            <a href="action.php?del=<?= $row['id'] ?>" class="text-danger mr-2" onclick="return confirm('Do you want to delete this comment?');" title="Delete"><i class="fas fa-trash"></i></a>
                            <a href="index.php?edit=<?= $row['id'] ?>" class="text-success" title="Edit"><i class="fas fa-edit"></i></a>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>

标签： javascriptphphtml

解决方案

当您使用该<select>功能时，应使用onchange="searchFun(this)"而不是触发该功能onkeyup，该功能用于键盘事件。

然后，选择选项时将触发该函数。

searchFun 的开头也可以更改为：

<script>
        const searchFun = (select) => {
            var x = select.value();

这看起来也很奇怪：

        let field = <?= $row['field'] ?>
            var y = field.val();

推荐阅读