DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Grabing JQuery autoComplete events

Grabing JQuery autoComplete events

dynasoftdynasoft Posts: 439Questions: 68Answers: 3
edited October 2019 in Free community support

Hi

I am trying to do the above but none of the JQuery events documented here get triggered: https://api.jqueryui.com/autocomplete/#event-change

I tried these:

        $('.ui-autocomplete-input').autocomplete({
            select: function (event, ui) {
                alert("Hiya1");
            }
        });

        $('.ui-autocomplete-input').on("autocompletechange", function (event, ui) {
            alert("Hiya2");
        });

        $('.ui-autocomplete-input').on("autocompletecreate", function (event, ui) {
            alert("Hiya3");
        });

Editor autoComplete box has this mark-up:

Tried with name of control $('#DTE_Field_CustomerVoiceCLI.CLI') but no joy either.

Thanks.

This question has an accepted answers - jump to answer

Answers

  • dynasoftdynasoft Posts: 439Questions: 68Answers: 3
    edited October 2019

    <div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;"><input type="text" id="DTE_Field_CustomerVoiceCLI.CLI" class="ui-autocomplete-input form-control" autocomplete="off"></div>

  • dynasoftdynasoft Posts: 439Questions: 68Answers: 3

    Code below won't work either:

    ` jQuery(function($){

            ManageBoxAutoComplete();
    });

    function ManageBoxAutoComplete() {

        $('.ui-autocomplete-input').autocomplete({
            source: function (request, response) {
                alert("Hiya1a");
            },
            select: function (event, ui) {
                event.preventDefault();
                alert("Hiya2a");
            },
            focus: function(event, ui) {
                event.preventDefault();
                alert("Hiya3a");
            }
        });

    }`
  • airmasterairmaster Posts: 72Questions: 15Answers: 2
    Answer ✓

    For events not firing, its usually because the element was created after the JS was read, so you use a delegate that was already created. Maybe set the delegate to a element that is higher in the class tree. I just added an id to my body and did it off that:

    <body id="body">

    You would then do this

    $('#body').on("autocompletechange", function (event, ui) {
    alert("Hiya2");
});

    Also I posted some autocomplete issues that I had, and you can look at the bottom for my code snippet using the editor.

  • dynasoftdynasoft Posts: 439Questions: 68Answers: 3

    That worked. Many thanks.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.