Create a suggestion list using typeahead.js and the source is from database

Question

Create a suggestion list using typeahead.js and the source is from database

1.5k Views Asked by HFial1964 At 22 April 2025 at 12:20

How can I make the suggestion list work using typeahead.js and with database as the source?

Before trying the database code, the fixed source code is working. But when I tried the database code, the database code does not work.

If possible, please explain why my database code does not work.

Fixed source code:

<html>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
    <script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#citiesInput').typeahead({                               
                name: "suggestion typeahead",
                local: ["italy", "malaysia", "new york", "USA", "England"]
            });
        });
    </script>
    <input type="text" class="q typeahead" dir="auto" id="citiesInput" onkeyup="typeahead(this.value)" />
</html>

Database code:

<html>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
    <script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#citiesInput').typeahead({                               
                name: "suggestion typeahead",
                remote: "/suggestion.php?q=%QUERY"
            });
        });
    </script>
    <input type="text" class="q typeahead" dir="auto" id="citiesInput" onkeyup="typeahead(this.value)" />

</html>

suggestion.php:

<?php
include 'connect.php'; //connect with database
$query = $_GET["q"];
if($query != "")
{
$safequery = mysqli_real_escape_string($con,$query);
$stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . $safequery . "%' OR keywords LIKE '%" . $safequery . "%' OR link LIKE '%" . $safequery . "%' LIMIT 4";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));
$number_of_result = mysqli_num_rows($result);
if ($number_of_result > 0) {
    //results found here and display them
    while ($row = mysqli_fetch_assoc($result)) { //show first 10 results
        $title = $row["title"];
        $link = $row["link"];
        echo "<div id='sugg-search-result'>";
        echo "<a href='$link' id='sugg-title'>" . $title . "</a>";
        echo "</div>";
        }
    }
}
?>

Original Q&A

There are 1 best solutions below

**Chris Leyva** · Answer 1

I can see 2 things wrong.

1) You need to specify the remote url (the documentation says it is required) UPDATE Seems that you can just set remote to the url. But I do see that they use single-quotes, where you are using double-quotes. Don't know if that matters.

2) Your php class needs to return valid JSON. You are returning html.

Database

<html>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
    <script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#citiesInput').typeahead({                               
                name: 'suggestion-typeahead',
                remote: {
                    url: '/suggestion.php?q=%QUERY',
                    datatype: 'json'
                }
            });
        });
    </script>

    <input type="text" class="q typeahead" dir="auto" id="citiesInput" onkeyup="typeahead(this.value)" />

</html>

Suggestion.php

<?php
include 'connect.php'; //connect with database
$query = $_GET["q"];
if($query != "")
{
$safequery = mysqli_real_escape_string($con,$query);
$stmt = "SELECT * FROM searchengine WHERE title LIKE '" . $safequery . "%' LIMIT 4";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));

$arr = array();

$number_of_result = mysqli_num_rows($result);
if ($number_of_result > 0) {
    //results found here and display them
    while ($row = mysqli_fetch_assoc($result)) { //show first 10 results
        //add $title to an array which you will call json_encode(arr) on.
        $arr[] = $row["title"];
        }
    }
}

$json = json_encode($arr);
print_r($json);
?>

NOTE

I see that your suggestions.php file was returning the title and it's link with the html. Typeahead is supposed to return a list of strings. Once the user selects one of the suggested words, then you should lookup the link for that word.

Create a suggestion list using typeahead.js and the source is from database

There are 1 best solutions below

NOTE

Related Questions in PHP

Related Questions in TYPEAHEAD

Related Questions in TWITTER-TYPEAHEAD

Trending Questions

Popular # Hahtags

Popular Questions