jQuery AutoComplete using AJAX - what am I missing?
Permalink
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 fromhttps://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 tohttp://roadrunneremails.net generate the JSON callback string correctly. Here is its output:
U>curlhttp://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.
I have copied (verbatim) the JQuery sample JavaScript fromhttps://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 tohttp://roadrunneremails.net generate the JSON callback string correctly. Here is its output:
U>curlhttp://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.
What do you get if you add this line before the response(data) and check your console?
Do you actually need it to ajax? If there are less bytes of names than you would have for a small jpeg image, the complexity of ajaxing it may be a false economy.