Struggling with typeahead.js

Question

I'd appreciate some help in getting a simple demo working of the Twitter typeahead.js library as I've struggled with it over the last two days.

I'm using a MAMP development server on my Macbook, and have a (large) MySQL database table that I'd like to query to use with a typeahead field on a Web page.

This is my main HTML file that I'm using. It literally has one field in it.

type-ahead.php
<?php
// HTML5 Header stuff
echo '<!DOCTYPE html>'.PHP_EOL;
echo '<html>'.PHP_EOL;
echo '<head><meta charset="UTF-8">'.PHP_EOL;
echo '<title>Typeahead Example</title>'.PHP_EOL;

// include the two libraries for typeahead to work
echo '<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>'.PHP_EOL;
echo '<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script>'.PHP_EOL;
echo '</head>'.PHP_EOL;

echo '<body>'.PHP_EOL;

echo '<h2 class="myclass">Typeahead testing</h2>'.PHP_EOL;
echo 'Type in a search: <input type="text" name="user_search">'.PHP_EOL;

echo "<script type='text/javascript'>".PHP_EOL;
echo "$('#user_search').typeahead({".PHP_EOL;
echo "   name: 'user_search',".PHP_EOL;
echo "   remote: './type-ahead-ajax.php?query=%QUERY',".PHP_EOL;
//echo "   minLength: 3,".PHP_EOL;
//echo "   limit: 10".PHP_EOL;
echo "});".PHP_EOL;
echo "</script>".PHP_EOL;

echo '</body></html>'.PHP_EOL;
?>

The source of this from the browser looks OK, but I'll paste it here too just in case.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>Typeahead Example</title>
<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script>
</head>

<body>

Type in a search: <input type="text" name="user_search">

<script type='text/javascript'>
$('#user_search').typeahead({
   name: 'user_search',
   remote: './type-ahead-ajax.php?query=%QUERY',
});
</script>
</body></html>

I've tested my call back script separately, and it is definitely connecting to the database and pulling back some results. For example if I use '/type-ahead-ajax.php?query=bleach' as a URL, I get all the products containing the word 'bleach'

type-ahead-ajax.php
<?php

// Connect to the database
try {
$dbh = new PDO('mysql:host=localhost; dbname=menu;', 'root', 'root');

    $query = '%'.$_GET['query'].'%'; // add % for LIKE query later

    //$query = '%milk%';    //debug
    echo $query.PHP_EOL;

    // do query
    $stmt = $dbh->prepare('SELECT title FROM waitrose WHERE title LIKE :query');
    $stmt->bindParam(':query', $query, PDO::PARAM_STR);
    $stmt->execute();

    // populate results
    $results = array();
    foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
        $results[] = $row;
        echo strtolower($row).PHP_EOL; //debug
    }
    $dbh = null;
} catch (PDOException $e) {
        print "Error!: " . $e->getMessage() . "<br/>";
        die();
}

// and return to typeahead
return json_encode($results);

?>

Basically, when you type into the input field nothing happens. It's as though either the callback isn't being called, it's returning nothing, or it's not registered properly in the first place.

Any suggestions?

Answer 1

When you do $('#user_search') , you're referring to an element with id user_search . You haven't, however, given your input any id. Add it:

<input type="text" name="user_search" id="user_search">

If that doesn't work, make sure you get the data you assume by accesssing ./type-ahead-ajax.php?query=%QUERY manually with some query, and check for JavaScript errors in your browser console.

Struggling with typeahead.js

Question

1 answers

solution1
1 2014-01-21 18:50:06

Struggling with typeahead.js

Question

1 answers

solution1 1 2014-01-21 18:50:06

solution1
1 2014-01-21 18:50:06