Prestashop autocomplete

Queation:

Im trying to add very simple autocomplete function to my prestashop addon input. What I want to achieve is something like this:
city.php

<label for="city">City: </label>

And auto.js

$(function() {
var availableTags = [
  "London",
  "Manchester",
  "Liverpool",
];
$( "#city" ).autocomplete({
  source: availableTags
});

The problem is that I dont know how to call jquery library in prestashop. I was trying to add something like this in my addon class:

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

With no luck...
 

Answer:

1:In controllers you can add any JS files with

$this->addJS(_THEME_JS_DIR_.'index.js');

So, you can put this plugin to theme_folder/js/plugins/autocomplite.js and add it with $this->addJS(_THEME_JS_DIR_.'plugins/autocomplite.js');
2:

0 down vote

In Prestashop 1.6, using hook function, you can do something like this (actualy i'm using it inside a custom module) : public function hookHeader() { //Jquery native Prestashop plugin $this->context->controller->addJQueryPlugin('fancybox'); //CSS $this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', 'all'); $this->context->controller->addCSS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css', 'all'); $this->context->controller->addCSS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.css', 'all'); $this->context->controller->addCSS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css', 'all'); //Javascript $this->context->controller->addJS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', 'all'); $this->context->controller->addJS('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js', 'all'); $this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js', 'all'); $this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js', 'all'); $this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/fr.js', 'all'); $this->context->controller->addJS('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js', 'all'); } As you can see, i'm adding Fancybox, Bootstrap and DateTimePicker. You should add your own plugins inside js directory, inside your theme or module. Calling a plugin in theme is easy using smarty ($js_dir i guess, or $tpl_dir) EDIT : Here's a sample of autocomplete in Prestashop : TPL : <!-- Block eversearch module TOP --> <div id="search_block_top" class="col-sm-4 clearfix"> <form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" > <input type="hidden" name="controller" value="search" /> <input type="hidden" name="orderby" value="position" /> <input type="hidden" name="orderway" value="desc" /> <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" /> <button type="submit" name="submit_search" class="btn btn-default button-search"> <span>{l s='Search' mod='blocksearch'}</span> </button> </form> And here's autocomplete using Jquery : $(document).ready(function(){ //console.log('Autocomplete loaded'); var baseUrl = $('#baseURL').val(); var evertrade_module_dir = baseUrl+'/useful'; var form = $('.ever_search_query_top'); //console.log(baseUrl); //Autocomplete $('#ever_search_query_top').autocomplete(evertrade_module_dir+'/ajax_product_list.php', { minChars: 1, autoFill: true, max:20, matchContains: true, mustMatch:true, scroll:false, cacheLength:0, formatItem: function(item) { return item[1]; } }).result(function(e,i){ console.log(i); if(i != undefined) $('#ever_search_query_top').val(i[1]); window.location.href = baseUrl+"recherche?orderby=position&orderway=desc&search_query="+i[1]+""; }); Assuming your php file is returning correct values. Prefere use your own HTML, overriding tpl in your theme.