Autocomplete when adding a block

Permalink May 20, 2020 at 3:57 PM

My block controller contains the following. Both are triggered upon adding the block. Does it matter which one I require the asset in?

class Controller extends BlockController
{
    public function registerViewAssets($outputContent = '')
    {
        syslog(LOG_ERR, 'MyBlock::registerViewAssets() '.$outputContent);
        $this->requireAsset('javascript', 'jquery-ui-autocomplete');
    }
    public function add()
    {
        syslog(LOG_ERR, 'MyBlock::add()');
    }
}

auto.js is as follows. Since C5 dynamically requested the JS after DOM is loaded, I expect the typical $( function() {} ) is not needed (I've tested both ways).

$( ".search-input" ).autocomplete({
    source: "/my_package/search"
})

jqueryUi makes the request but doesn't properly display the results. Maybe should change to select2 or another library?

Then if I close the add block dialog and reopen it, I see the registerViewAssets() and add() methods get triggered but the JS is not downloaded again from the server which makes sense. However, the autocomplete doesn't attempt to make any more server requests.

How should autocomplete be performed when adding a block? Thanks

NotionCommotion replied on May 20, 2020 at 6:27 pm Permalink Reply

Changed to select2 and it renders fine, but still if the add block dialog is closed then opened, JS no longer applies to the element.

NotionCommotion replied on May 22, 2020 at 5:29 pm Permalink Reply

I struggled with select2 initially because the select2 documentation states to use a <select>, but to make it work I needed an <input>. Turns out the bundled C5 select2 is an older version. I tried using the latest select2 3.x but C5 didn't seem to like it.

Should I stick with the bundled select2 2.x? If so, how can I determine what version it is so that I can read up on the correct documentation?

Thanks