Display unlisted auto-complete search results with PHP

前端未结

关注

 1  1815

I am trying to display an unlisted search results which is able to have a click event to a target html page based on the search from the database (mysql).

I am using

相关标签:

1条回答

心在旅途

2020-12-22 00:55

Use the on select callback (its in the docs), include the id, label and value in your json then on click use a window.location.href to navigate to the page. You could also load the content in using an ajax call.

So for example using ajax get the content:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/ionic.css">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui.js"></script>
   </head>
   <body>
       <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
           <a href="index.html" class="button button-clear">Home</a>
           <h1 class="title">Search Database (JSON)</h1>
       </div><br/><br/>
       <p>
           <input type="text" id="searchField" placeholder="AF artwork">
       </p>

       <div id="result"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                $(function() {
                    $( "#searchField" ).autocomplete({
                        source: './search.php',
                        minLength: 2,
                        select: function( event, ui ) {
                            $.ajax({
                                url: "./search.php",
                                method: "GET",
                                data: { 
                                  id: ui.item.id
                                }
                            }).done(function(data) {
                                $('#result').html('This is the result for: '+data.id+' - '+data.name);
                            }).fail(function(xhr) {
                                $('#result').html('Failed to load result!');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

And your search.php file, would look like the following which is safe from SQL injection as it uses prepared queries:

<?php
header("Access-Control-Allow-Origin: *");

$response = function ($data = []) {
    header('Content-Type: application/json');
    exit(json_encode($data));
};   

$con = mysqli_connect('localhost', 'root', '', 'qc_artwork');

if (!$con) {
    http_response_code(500);
    $response(['error' => 'could not connect database']);
}

// auto complete search term 
if (isset($_GET['term'])) {
    //get search term
    $searchTerm = isset($_GET['term']) ? '%'.$_GET['term'].'%' : null;

    //get matched data from name table
    $stmt = $con->prepare("SELECT * FROM artwork WHERE name LIKE ? ORDER BY name ASC");
    $stmt->bind_param('s', $searchTerm);

    $result = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);

    foreach ($result as $row) {
        $data[] = [
            'id' => $row['id'],    
            'label' => $row['name'],    
            'value' => $row['id'],    
        ];
    }
    $response($data);
}

// result item
if (!empty($_GET['id'])) {
    //get matched data from name table
    $stmt = $con->prepare("SELECT * FROM artwork WHERE id = ? LIMIT 1");
    $stmt->bind_param('i', $searchTerm);
    $response($stmt->get_result()->fetch(MYSQLI_ASSOC));
}
?>

Untested but should work.

0 讨论(0)