how to make a search bar which search a particular field in a website using javascript?

I am trying to make a search bar with select tag.If someone will click on any of the options like Bus driver then in the comment box the field with same text will come.I am using javascript , php with HTML and CSS . I am trying but its not working .Please help me its urgent.I am new in web developing .I am just 15 years old.I have index.php and a database with two tables.

My javascript code for search bar:-

        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")

My search bar code:-

<select id="select_job" class="label-field form-control" onkeyup="searchFun()" name="field">
    <option value="">Choose your field...</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>

my comment box code:-

<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">
            $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 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 class="card-footer py-2">
                        <div class="float-left">
                        <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>
            <?php } ?>

20 thoughts on “how to make a search bar which search a particular field in a website using javascript?”

  1. What you have written here unfortunately doesn’t make much sense. My general suggestion would be: try first writing this without the PHP, using only static HTML/JavaScript.

    The biggest problem is the line

    let field = <?= $row['field'] ?>

    $row seems to be your loop variable in your HTML, how ever that JavaScript isn’t inside the loop, so $row won’t be defined (you should be getting an undefined variable error).

    Moreover even if $row['field'] were defined (let’s say it contains the string Example), then that would generate the JavaScript line:

    let field = Example

    Which makes JavaScript interpret Example as a variable, which also wouldn’t be defined.

    Generally it’s a bad idea to generate JavaScript with PHP. (There are cases where it makes sense, but this most likely isn’t one.) I would suggest moving all JavaScript into a separate *.js file, so that you don’t come into temptation to mix PHP and JavaScript.

  2. When you are using the <select> the function should be triggered with onchange="searchFun(this)" instead of onkeyup, which is for keyboard events.

    Then the function will be triggered when an option is selected.

    the beginning of searchFun can then also be changed to:

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

    This also looks strange:

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

    Should it perhaps be like this?

            var y = <?= $row['field'] ?>

Leave a Comment