1

I'm trying to implement typeahead in one of my projects and to troubleshoot it, I've created another site with just the typeahead function, exactly the same as example found here as a sort of barebones attempt.

The problem is nothing is happening on my website when I type in any letters. I've tried this on codepen and it works, with the same script sources, in the same order. I can't think of why it isn't working.

Here is my code:

<!DOCTYPE html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdn.rawgit.com/corejavascript/typeahead.js/master/dist/typeahead.jquery.js"></script>
        <script>
            var substringMatcher = function(strs) {
            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)) {
                    matches.push(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',
            source: substringMatcher(states)
            });
        </script>
    </head>
    <body>
        <main>
            <div id="the-basics">
            <input class="typeahead" type="text" placeholder="States of USA">
            </div>
        </main>
    </body>
</html>
5.9 protons
  • 41
  • 5
  • Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Taplar May 14 '20 at 16:59
  • You script is in the `` and not in a document ready or other logic to make it wait until the elements you are trying to select exist in the dom. – Taplar May 14 '20 at 16:59
  • I've moved the script into the ``````, but I still get the same result – 5.9 protons May 14 '20 at 17:05
  • Did you move it after the creation of the `#the-basics .typeahead` markup? – Taplar May 14 '20 at 17:06
  • I moved it to above that btw – 5.9 protons May 14 '20 at 17:21
  • If you moved it above that markup, then you need to re-read what I said, and re-read that duplicate post. – Taplar May 14 '20 at 17:22

1 Answers1

0

It required a DOM ready event for it to work. Not sure why the same code worked on codepen though. For anyone reading this in the future: 

        <script>
            $(document).ready(function() {
            var substringMatcher = function(strs) {
                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)) {
                        matches.push(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',
            source: substringMatcher(states)
            });
        })
5.9 protons
  • 41
  • 5
  • Because codepen most likely puts the javascript *after* the markup, as I've previously mentioned. – Taplar May 14 '20 at 17:22