Trigger an event within a jquery plugin from outside

Question

I use the jquery easy autocomplete plugin which has an internal event "onSelectItemEvent".

now i want to call this event from outside (since it is bound to an extensive function i wrote already).

I prepared a fiddle, but triggering the plugins event with this doesn't work :)

$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());

$(document).ready(function() {
  var options_ac = {
    url: "https://fcgi.msk.link/model-json.pl?site=test",
    getValue: function(element) {
      //console.log(element);
      return element;
    },
    list: {
      match: {
        enabled: true
      },
      sort: {
        enabled: true
      },
      maxNumberOfElements: 8,
      onSelectItemEvent: function() {
        $("output").html($("#example-ac").val())
      }
    },
    theme: "square"
  };
  $("#example-ac").easyAutocomplete(options_ac);

  $("#trigga").click(function() {
    $("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

<input id="example-ac" />
<br>
<input id="example-ac" /><br/>
<output></output>
<button id="trigga">
trigger
</button>

http://jsfiddle.net/Lgetus29/

Thanks for a hint if this works or if the solution has to be done another way. the codepen example is just small code while the real coding for this internal function is massive, so i want to reuse. maybe i better create a function outside the plugin then reuse this function in the "onSelectItemEvent()", is that even possible?

THANKS !!

Answer 1

Why not use it like

$("#trigga").click(function() {
    options_ac.list.onSelectItemEvent()
});

So your final code will look like

$(document).ready(function() {
    var options_ac = {
        url: "https://fcgi.msk.link/model-json.pl?site=test",
        getValue: function(element) {
        //console.log(element);
            return element;
        },
        list: {
            match: {
                enabled: true
            },
            sort: {
                enabled: true
            },
            maxNumberOfElements: 8,
            onSelectItemEvent: function() {
                $("output").html($("#example-ac").val())
            }
        },
        theme: "square"
    };
    $("#example-ac").easyAutocomplete(options_ac);

    $("#trigga").click(function() {
        options_ac.list.onSelectItemEvent();
    });
});