CODEWITHSUNDEEP
javascriptphp
Chris
Chris

Reputation: 1654

Twitter-Typeahead not autocompleting with Bloodhound

I'm having some issues with my code. I'm trying to use Twitter-Typeahead and Bloodhound to auto complete searches. The thing is, it's not auto completing.

Code test.php:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Page</title>

        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <form action="test.php" method="get" autocomplete="off">
            <input type="text" name="user" id="users">
            <input type="submit" value="Go">
        </form>

        <script src="js/main.js"></script>
        <script src="js/typeahead.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </body>
</html>

Code main.js:

$(document).ready(function() {
    var users = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'users.php?query=%QUERY'
    });

    users.initialize();

    $('#users').typeahead({
        hint: true,
        highlight: true,
        minLength: 2
    }, {
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter()
    });
});

Any help would be much appreciated.

Thanks, in advance!

Upvotes: 0

Views: 82

Answers (2)

Simon Guichard
Simon Guichard

Reputation: 162

Try to load Jquery before main.js and typeahead.js

Upvotes: 1

Simon Guichard
Simon Guichard

Reputation: 162

You can try this syntax for the Bloodhound creation:

var users = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.username);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {url: 'users.php?query=%QUERY'},

    }
});

Upvotes: 0

Related Questions