Twitter Typeahead not bringing up autocomplete box

Question

I am attempting to make an autocomplete textbox using Twitter's typeahead.js , but so far only the textbox is appearing, no autocomplete box. However, it is working fine on JSFiddle , so I assume something with how JSFiddle wraps things is fixing the problem behind the scenes.

Note that most of the following is taken straight from typeahead.js' basics example . I'm just trying to get a sample working for now. Also, I'm using Django, in case that matters.

My HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>States</title>
    </head>
    <body>

        <div id="the-basics">
            <input class="typeahead" type="text" placeholder="States of USA">
        </div>

        <script src="/static/jquery.min.js"></script>
        <script src="/static/js/typeahead.bundle.js"></script>
        <script src="/static/js/state-autocomplete.js"></script>

    </body>
</html>

state-autocomplete.js:

$(document).ready(function () {

    var substringMatcher = function (strs) {
        console.log('in substringMatcher')
        return function findMatches(q, cb) {
            var matches, substringRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array
            $.each(strs, function (i, str) {
                if (substrRegex.test(str)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({
                        value: str
                    });
                }
            });

            cb(matches);
        };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'states',
        displayKey: 'value',
        source: substringMatcher(states)
    });
});

jquery.min.css is v2.1.1 (I'm running it on Chrome v35) and typeahead.bundle.js is from the typeahead.js Github repository.

So far I've also tried putting the scripts in the <head> tag, rearranging the <script> tags, and trying it with and without $(document).ready() .

What am I missing/doing wrong?

Answer 1

Is your JQuery JS file in the 'js' folder? Your path refers to it in the 'static' directory instead. Does the console print anything out when you try to run the HTML+JS?

The code runs fine on my computer. Have you tried updating the reference for your sources? I copied and pasted your code into HTML and JS files and replaced the local references to JQuery and TypeAhead to the direct ones below and it displayed just fine.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

Twitter Typeahead not bringing up autocomplete box

Question

1 answers

solution1
1 ACCPTED 2014-06-30 19:43:26

Twitter Typeahead not bringing up autocomplete box

Question

1 answers

solution1 1 ACCPTED 2014-06-30 19:43:26

solution1
1 ACCPTED 2014-06-30 19:43:26