Live search with MySQL, PHP, and AJAX is not working

Ok so i'm trying to do a live search using PHP, MySQL, and AJAX. I'm not to sure were i'm going wrong. My database is hosted on phpMyAdmin. The database name is Info and the table i'm trying to access is names.

My three pages are index.php connect.php and fetch.php Index.php

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
        <style>

            #here
                {
                    width:400px;
                    height:300px;
                    border: 1px solid grey;
                    display:none;
                }

            #here a{
                display:block;
                width:98%;
                padding:1%;
                font-size:20px;
                border-bottom:1px solid grey;
            }

                </style>
        <body>

            <script src=jq.js></script>

            <script src="jq.js">
                $(document).ready(function(e)
                {
                    $("search").keyup(function()
                    {
                        $("#here").show();
                        var x = $(this).val();
                        $.ajax(
                            {
                                type:'GET',
                                url:'fetch.php',
                                data: 'q='+x,
                                success:function(data)
                                {
                                    $("#here").html(data);
                                }
                                ,
                            });
                    });
                });




            </script>


            <h1>Live Search</h1>
            <input type="search" name="search" id="search">
            <div id="here">

            </div>
        </body>
</html>

Fetch.php

<?php
if(!empty($_GET['q']))
{

    include 'connect.php';
    $q=$_GET['q'];
    $query = "select * from names where names like '%$q%';";
    while($output=mysqli_fetch_assoc($result))
    {
        echo '<a>'.$output['names'].'</a>';
    }
     $query = "select * from names";
}

fetch.php

    ?>

<?php
$host="localhost";
$user="andremac96";
$password="";
$db="Info";
$conn = mysqli_connect($host,$user,$password,$db);
?>

Solution

There are a few things wrong here.

Firstly, you never executed the query for:

$query = "select * from names where names like '%$q%';";

So, you need to include mysqli_query() and pass the db connection to it.

$query = mysqli_query($conn, "select * from names where names like '%$q%';");

Then, you would have been using the wrong variable $result for

while($output=mysqli_fetch_assoc($result))

which should have been $query, but again; querying it also.

Same thing for $query = "select * from names";

$query = mysqli_query($conn, "select * from names");

^ Unsure what you want to do with that one though.

Then you forgot to put the # for the search id in $("search").keyup(function() which should have read as:

$("#search").keyup(function()

Check for errors on PHP and MySQL:

Plus, check your JS console.

Then there's echo '<a>'.$output['names'].'</a>';

^ Unsure what you want to do here also.

Then the 2nd <script src="jq.js"> that should just read as <script>.

Your present code is open to SQL injection. Use prepared statements, or PDO with prepared statements.

HTML stickler.

Place <style>...</style> inside <head></head>. Certain browsers will throw warnings in HTML source.

Edit: (rewrite as to what I used which tested successfully).

Sidenote: I added <form></form> tags, but did work without them.

File #1:

<!DOCTYPE html>
<html>
    <head>
        <title></title>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

        <style>

            #here
                {
                    width:400px;
                    height:300px;
                    border: 1px solid grey;
                    display:none;
                }

            #here a{
                display:block;
                width:98%;
                padding:1%;
                font-size:20px;
                border-bottom:1px solid grey;
            }

                </style>

    </head>

        <body>


            <script>
                $(document).ready(function(e)
                {
                    $("#search").keyup(function()
                    {
                        $("#here").show();
                        var x = $(this).val();
                        $.ajax(
                            {
                                type:'GET',
                                url:'fetch.php',
                                data: 'q='+x,
                                success:function(data)
                                {
                                    $("#here").html(data);
                                }
                                ,
                            });
                    });
                });


            </script>


<h1>Live Search</h1>
<form>
    <input type="search" name="search" id="search">
</form>

    <div id="here">

    </div>


        </body>
</html>

File #2: (fetch.php)

<?php 

 include 'connect.php'; // being the MySQLi_ API

if(!empty($_GET['q']))
{


$q= mysqli_real_escape_string($conn, $_GET['q']);


    $query = mysqli_query($conn, "select * from names where names like '%$q%';") 
             or die(mysqli_error($conn));


    while($output=mysqli_fetch_assoc($query))
    {

        echo '<a>'.$output['names'].'</a>';


    }
//     $query = "select * from names";
}

Make sure your .php file paths are correct and that they are accessible for your script.

Add error reporting to the top of your file(s) which will help find errors.

<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Then the rest of your code

Sidenote: Displaying errors should only be done in staging, and never production.