Please Assist with Autocomplete

[prosci8]

Good day,

 

I'm trying to add autocomplete to an HTML <input> in my tpl file. Using PrestaShop 1.6.1.11

 

I'm overriding the AddressController.php setMedia:

    public function setMedia()
    {
        parent::setMedia();
        $this->addJS(array(
            _THEME_JS_DIR_.'tools/vatManagement.js',
            _THEME_JS_DIR_.'tools/statesManagement.js',
            _PS_JS_DIR_.'auto.js'
        ));
    }

Also modifying the address.tpl file:

<div class="required form-group">
    <label for="city">{l s='City'} <sup>*</sup></label>
    <input id="my_cities" />
</div>

 

auto.js:

$(document).ready(function() {
  var availableTags = [
    "London",
    "Manchester",
    "Liverpool",
  ];
  $( "#my_cities" ).autocomplete({
    minChars: 1,
    source: availableTags
  });
});

What I'm getting when I load the page is :

<input id="my_cities" autocomplete="off" class="ac_input">

And there is no autocomplete functionality.

 

Please help,

Nevar

Edited June 21, 2017 by prosci8 (see edit history)

[prosci8]

I found the issue. In the default theme, there is a blocksearch module. This module uses the old JQuery autocomplete plugin loaded via:

$this->context->controller->addJqueryPlugin('autocomplete');

Which expects JS in this form:

$("#my_cities").autocomplete(["ooo1", "ooo2", "ooo3"]);

Of course, when I then try to load the newer JQueryUI autocomplete, they conflict. I replaced the above line with:

$this->context->controller->addJqueryUi('ui.autocomplete');

Which expects JS in this form:

$("#my_cities").autocomplete({source: ["ooo1", "ooo2", "ooo3"]});

to test an it all worked!

 

Of course, that breaks the blocksearch module, as I would have to port its code to use the new autocomplete. So for now, I will just stick to the old plugin and JS format.