Web Development·12,107 discussions

jQuery AutoComplete using AJAX – what am I missing?

Tags: Web development

I am trying to use jQuery AutoComplete for a client / customer selection input field – on a simple test page (that I plan to enhance, once the AJAX part is working).

I have copied (verbatim) the JQuery sample JavaScript from https://jqueryui.com/autocomplete/#remote-jsonp and the only change I have made to this is the”#…” ID name, and the URL value in the “source” definition.

The back-end server (which is running Django) receives requests from the JavaScript fine, and seems to generate the JSON callback string correctly. Here is its output:
U:\>curl http://localhost:51181/AjaxClientAutocomplete/?term=adm
[ {label: “ADMAC”, value: “109”}, {label: “Administration Software L”, value: “110”}, {label: “Adminsoft – Office Rental”, value: “111”}, {label: “Adminsoft – Reimburse Int”, value: “112”}, {label: “Adminsoft – Royalties”, value: “113”}, {label: “adminsoftware.biz”, value: “114”}, {label: “Admiral Word Publishing B”, value: “115”} ]

Using the developer tools on my browser, I have copied the HTML that the DOM sees into a test HTML file on my hard drive. I have cut this back to the bare essentials, and made several variants to test what works and what doesn’t.

Using a local variable as the AutoComplete “source” works fine – including with it being an array of objects as per the full string shown above (copy-and-pasted into the JavaScript).

So the JavaScript (shown below) seems to be sending a request to the server OK. The server is receiving this and responding – seemingly with a correct JSON response. The JavaScript just doesn’t seem to process this and update its source label / value list, so it can use this like it does when the source is a variable with the same list.

I am fairly new to this technical area, and can’t think of anything else to try. Can anyone see what I am missing? Here is the JavaScript:

$(function () {

$(“#idClientName”).autocomplete({
source: function (request, response) {
$.ajax({
url: “/AjaxClientAutocomplete/”,
dataType: “jsonp”,
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
minLength: 2,
});
});

P.S. I have stripped out the “log” components due 2500 char limit.

Topic