XF 2.3 XF JS Autocomplete Event "auto-complete:insert" Does not seem to bubble for xf2.3

[tenants]

related to this discussion, but for xf 2.3
I have found that the event "auto-complete:insert" Does not bubble for xf2.3

So if you want to plug in to the custom event (for when you want to play with more than just returned id:value) , ie something like this:

{
    "status": "ok",
    "html": {
        "content": ""
    },
    "results": [
        {
            "my-other-data-a": 1641824923,
            "my-other-data-b": 1641835560,
            "value": "105",
            "text": "GR-Sprint-APP"
        }, ....

In the tempate, use somethng like:

<form>                   
   <xf:textbox name="x
        ac="single:
        autocomplete="off"
        data-xf-init="new-autocomplete"
        data-acurl="{{ link('someurlthatreturnsjson') }}"
    />
 </form>

You can simply extend the XF.customEvent (although it would have been nice to have just listened for auto-complete:insert

< script >

    document.addEventListener('DOMContentLoaded', function() {
        if (typeof XF.AutoComplete !== 'undefined') {

            // this event is never bubbled via the document or the element, xenforo stops it for some reason, so we can just extend XF.customEvent
            // inputElement.addEventListener('auto-complete:insert', function(event) {
            //    console.log('auto-complete:insert event never gets called', event);
            //});
            // we can find the custom events with this:

            const originalCustomEvent = XF.customEvent;
            XF.customEvent = function(type, detail) {
                console.log('XF.customEvent called:', type, detail);
                // you can then do something when the autocomplete is changed from one value to the other
                return originalCustomEvent.apply(this, arguments);
            };
        }
    });

//And to capture the returned data from json, register your init, and you can listen for showResults to get all the results that returned::

XF.Element.register('new-autocomplete', 'XF.NewAutoComplete');

XF.NewAutoComplete = XF.extend(XF.AutoComplete, {
    showResults: function(results) {
        if (!this.__backup) {
            this.__backup = {
                originalShowResults: XF.AutoComplete.prototype.showResults,
                originalAddValue: XF.AutoComplete.prototype.addValue
            };
            console.log('showResults1', results); // all the returned data from json response in the search (probably the custom things you want)
            this.__backup.originalShowResults.call(this, results);
            delete this.__backup;
            if (this.abortController) { this.abortController = null;}
            if (this.options.jsonContainer && results) {results = results[this.options.jsonContainer];}
            if (results && this.results) {
               console.log('showResults2', this.results);  // the search that you typed in
            }
        }
    },
});

</script>

I don't know if this is the right way of doing it, or if the fact that auto-complete:insert is not bubbling is a bug or intentional, but I guess this is one way to extend auto compete (when we need more than just id:value returned)

 

[Jeremy P]

Can't reproduce that. It bubbled here on the search menu just now:

 

[tenants]

Interesting, I guess thats the default (users) data-acurl that you are using Jeremy (no data-acurl defined)
maybe it's something strange I'm doing

Hmm, I do in fact also see it bubble when I XF.on from the console as you have done

but not inside <script> ... DOMContentLoaded

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (typeof XF.AutoComplete !== 'undefined') {
     // this event is never bubbled up to the document or the element, xenforo stops it for some reason, so we can just exend XF.customEvent
     document.addEventListener('auto-complete:insert', function(event) {
        console.log('inside DOMContentLoaded auto-complete:insert event.', event);
     });
  });
});

Oh... should I be using XF.on


wow, yes, that works

<script>
   document.addEventListener('DOMContentLoaded', function() {
        if (typeof XF.AutoComplete !== 'undefined') {
            XF.on(document, 'auto-complete:insert', function(event) {
                console.log('inside XF.on auto-complete:insert event.', event);
            });