简体   繁体   中英

Dropdown list not populating from database

I seem to be having an issue. I have an input field and a <select> field. I need to type in a location in the input field and if that word matches a record in my database then it should the names of the people in my <select> drop down list. Here is my index.php file:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" name="location_input" id="location_input">
Tutor:<select name="locations" id="locations">
    <script> 
        $("#location_input").keyup(function(){
            const location = $("#location_input").val();
            $("#locations").html(''); //reset dropdown
            // do ajax call to get locations
            $.ajax({
                url: 'search.php',  //replace this with your route of the search function
                data: {location}, //pass location as body data
                dataType: 'json', //expect a json response back
                success: function(data) {
                    data.forEach(function(el) { //loop over the json response
                        let option = `<option id=${el.id} value=${el.name}>${el.name}</option>`
                        $("#locations").append(option); //append locations to select dropdown
                    });
                },
                error: function(err) {  //error functions
                    console.log(err);
                    alert("Error")
                }
            });
        });
    </script>

</select>
</body>
</html>

and here is my search.php file:

   <?php
function SearchLocations() {
    $conn = new mysqli('localhost', 'root', '', 'tutors') or die ('Cannot connect to db');
    $result = $conn->query("select * from tutor_location where Location_tags LIKE ='%". $_GET['location']."%'");

    $locations = [];

    while ($row = $result->fetch_assoc()) {
        $locations[] = $row;    

    }

    return json_encode($locations);

}

?>

And here is a screenshot of my database: 在此处输入图片说明 The issue which I am facing is that it gives me a localhost says error and the console doesn't show me an error.

You can try ajax like below request,

 $.ajax({ type:"POST", dataType:"json", url: 'search.php', data: {order_numbers: values, order_state: status}, success: function(response){ }, error: function(response){} }); 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM