更新Ajax表单提交上的mysqli查询

Question

I have a dynamicaly php page that displays all results from database and i want to create a search bar that updates at every character the user inputs. My problem is that i can't make the query update! he always displays no results. First I had the query in the same page as the form but that wouldnt work because the ajax would run all the code from the page when i used that url in the parameters so i splitted everything but it still doesnt work. Any sugestions?

PHP page - part with search bar --> categorias.php:

<div class="container">
<h2 class="title">Empresas De Confianza</h2>
<div class="col-lg-12">
    <div class="col-lg-6 col-centered">
        <form method="POST" action="buscador.php" id="search">
            <input class="search-bar" type="text" name="filterName" id="filterName">
            <button type="submit" hidden></button>
            <?php
            $msqliquery = "SELECT * FROM empresa WHERE categorias_id = $id AND menulogo IS NOT NULL";
            $array = $connection->query($msqliquery);
            ?>
        </form>
    </div>
</div>


<?php
echo '<div class="row index-margin" id="results">';

if (mysqli_num_rows($array) == 0) {
    echo "<h2 class='text-center'>No hemos encontrado ningún resultado con esa busqueda!</h2><ul class='text-center'><li class='list-categorias'><a class='fa-categorias fa fa-refresh' href='categorias.php?id=$id'></a></li></ul>";
};
while ($field = mysqli_fetch_array($array)) {
    ?>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
        <a style="background-color:<?php echo $field['color'] ?>"
           href="profile.php?id=<?php echo $field['id'] ?>">
            <img src="/test<?php echo $field['menulogo'] ?>" class="logo img-grayscale">
            <div class="hover-item"><h5 class="label-profile"><?php echo $field['nombre'] ?></h5></div>
        </a>
    </div>
<?php }
echo '</div>' ?>

´ Form/search bar handling --> buscador.php:

<?php
require 'config.php';
$connection = new mysqli($servername, $username, $password, $db);
session_start();
$id = $_SESSION['id'];

$filterName = $_POST['filterName'];
$msqliquery = "SELECT * FROM empresa WHERE categorias_id = $id AND menulogo 
IS NOT NULL AND nombre COLLATE UTF8_GENERAL_CI LIKE '%$filterName%'";
$array = $connection->query($msqliquery);

Function for update at every character and ajax form submit:

$(document).ready(function () {

    var timeoutID = null;

    $('#filterName').keyup(function (e) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(searchEmpresa.bind(undefined, e.target.value), 500);
    });

    function searchEmpresa(str) {
        console.log('search: ' + str);
        $("#search").submit(function (event) {
            $.ajax({
                method: "POST",
                url: 'buscador.php',
                data: $("#filterName").val(),
                success: function (data) {
                    console.log(data);
                    $("#results").load("categorias.php #results > *");
                }
            });
            event.preventDefault();
        });
    }
})

Answer 1

You have to send data as object with key value pairs

data: {filterName:$("#filterName").val()},

Also you have to correct method: 'post', So you should have method of posting not type of posting Hope it will help you.

put this code in your buscador.php

<?php

if (mysqli_num_rows($array) == 0) {
echo "<h2 class='text-center'>No hemos encontrado ningún resultado con esa 
busqueda!</h2><ul class='text-center'><li class='list-categorias'><a 
class='fa-categorias fa fa-refresh' href='categorias.php?id=$id'></a></li>
</ul>";
};
 while ($field = mysqli_fetch_array($array)) {
 ?>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 parent size">
    <a style="background-color:<?php echo $field['color'] ?>"
       href="profile.php?id=<?php echo $field['id'] ?>">
        <img src="/test<?php echo $field['menulogo'] ?>" class="logo img-
  grayscale">
        <div class="hover-item"><h5 class="label-profile"><?php echo 
 $field['nombre'] ?></h5></div>
    </a>
  </div>
 <?php }
echo '</div>' ?>

and append it to your div with id result

$('#result').append(data);