JQuery Typeahead not working

Design help Custom code
1

Hi
I’m hoping this is just a newbie mistake, but I’m trying to use a typeahead component on my site.
I’ve stripped things right back and the page link is below.

Once it loads, there is a dumb alert showing me that jquery itself has loaded just fine.

I’ve copied the exact

block containing all the webflow additions (copied from the resultant html), exact javascript (in the custom-code section) into codepen and it works fine, so I’m hoping there’s a setting in webflow I need to tweak.

The error I’m seeing in the console is Uncaught TypeError: $(…).typeahead is not a function

Any help would be most appreciated.
Cheers, Simon.

https://preview.webflow.com/preview/typeahead-demo?utm_medium=preview_link&utm_source=dashboard&utm_content=typeahead-demo&preview=ff1b059174961ec445dc2dc5693e3623&mode=preview

2

Hi @sigmazen, welcome to the forum :smiley:

The code might need a specific version of the jquery, which codepen loads and webflow doesn’t.
Try adding it to the code.

3

Hi … thanks for the response.
They’re both in synch. I’d overridden the codepen versions (and cdn source) to be identical to the versions I’d added in the webflow custom-code head-code section.
Thanks in advance for any other suggestions.
Cheers

4

Can you share the codepen?

5

You did not add any version of jQuery script to you webflow project.

6

Hi
Here is the codepen

The JQuery is in the head-code in the custom code section
src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”
src=“https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js”

7

Try to add this to the page

8

I think that’s where I originally had it :wink:
Anyway, re-added … so it’s now at project-level and at page-level … still the same issue.
The browser-console is showing that it’s loading the state-list correct, but that the it’s breaking at this point $(“.mytypeahead”).typeahead({

9

try adding this custom attribute to the input:
data-name=“myTypeahead”

Screen Shot 2020-03-19 at 16.40.18

10

No joy
image

11

Case sensitive !

myTypeahead

12

I tried that first and then modified so it was the same as the jquery parameter :wink:
image

Thanks again

13

:upside_down_face:
https://typehead.webflow.io/

14

I have copied everything from codepen and it works fine :slight_smile:

15

:flushed: :heart_eyes: AWESOME

how’d you get all that extra stuff in there?
can you share the project?

16

https://preview.webflow.com/preview/typehead?utm_medium=preview_link&utm_source=designer&utm_content=typehead&preview=2c4a4cfa8000df35b4bb8fbeb5f1bbb3&mode=preview

1 Like
17

Thank you so much … I’ll go through and debug my effort to figure out where the mistake is.
SUPERB

1 Like
18

Stay safe out there :smiley:

19

Same to you …
btw I simply moved the entire JQuery from Project-level to Page-level, like you had, and it worked … I’m sure I had it there to start with :thinking:
I even removed the data-type to see if that was I originally missed and it still worked.
Weird
Either way … thanks again for you real-time help.
Back to playing with webflow now :slight_smile:

1 Like