jQuery autocomplete ui with json issue

Question

I'm trying to get the jquery autocomplete ui to work but without success. There is no list of matches presented. I'm getting the error "TypeError: this.source is not a function"

so far I have an input field <input type="text" id="searchbar" name="title" placeholder="Search">

and then in my script I have

I'm not getting this to work. anyone have any ideas of where I can begin to troubleshoot? I really have a hard time with the jquery ui documentation.

change source: "data", to source: data,

B. Desai
– B. Desai

2017-04-29 11:56:56 +00:00
Commented Apr 29, 2017 at 11:56 — B. Desai
– B. Desai, Commented Apr 29, 2017 at 11:56

Andréle · Accepted Answer · 2017-04-29 14:06:38Z

0

You only have to use this code for your autocomplete:

$("#searchbar").autocomplete({
    source: "php/searchbar.php",
    minLength: 3
});

You don't have to do an extra ajax request. The plugin it self does the ajax request.

You have an missing hash in your autocomplete selector too:
$("searchbar") vs. $("#searchbar")

I have created a jsfiddle here: https://jsfiddle.net/9rtu412g/

Source from documentation here: https://jqueryui.com/autocomplete/#remote (view source)

For your jQuery version:
<script src="js/jquery-1.6.js" type="text/javascript"></script>

Use this jQuery UI version: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

I hope I could help you to solve your problem.

edited Apr 29, 2017 at 14:06

answered Apr 29, 2017 at 12:26

Andréle

3363 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Polarbearz Over a year ago

With this, in my html <script></script> instead of a seperate JS file, I get the error "TypeError: $(...).on is not a function"

Polarbearz Over a year ago

TypeError: $(...).on is not a function - <script src="js/jquery-1.6.js" type="text/javascript"></script>

Andréle Over a year ago

@Polarbearz Updated. I hope you are using jQuery UI 1.11.4 (Legacy, for jQuery1.6+) or lower for autocomplete?

Polarbearz Over a year ago

Using the code you have given it is now working without errors, and displaying the results like this: puu.sh/vzYwk/806628ecd5.png . I am greatful for your help, I just need to display the results in a better way somehow now. For some reason I also can't click on the result and be linked to the page/event.

Andréle Over a year ago

@Polarbearz have you added the CSS file from the jQuery UI package to your page? Like this: cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/…

|

Asif Uddin · Accepted Answer · 2017-04-29 12:04:30Z

0

At first console.log your data to check is there any data returned from ajax request then remove double quote from your data variable.

 source: "data"(wrong)
 source: data(right)

wish it helps

answered Apr 29, 2017 at 12:04

Asif Uddin

4096 silver badges16 bronze badges

1 Comment

Polarbearz Over a year ago

I changed this, and now I am getting the error: TypeError: this.source is not a function - according to this thread, stackoverflow.com/questions/3308935/…, the data needs to be put inside a variable, and I've updated my JS above, whilst still getting the error.

Collectives™ on Stack Overflow

jQuery autocomplete ui with json issue

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related