Question

  • Creator
    Topic
  • #2144642

    jQuery AutoComplete using AJAX – what am I missing?

    by graeme1589605680 ·

    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.

You are posting a reply to: jQuery AutoComplete using AJAX – what am I missing?

The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our Community FAQs for details. All submitted content is subject to our Terms of Use.

All Answers

Share your knowledge