Prestashop autocomplete

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...

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');`

Save your "js" file inside your module's js folder And set it in your module Controller's setMedia function by `$this->addJS(array(_MODULE_DIR_.$this->module->name.'/views/js/yourPlugin.js'));
`

you can move your js file in your theme-name/js/autoload/your-js-file.js.. Prestashop load all autoload folder js file. so you can use that.

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.

> The problem is that I dont know how to call jquery library in
> prestashop.

In Prestashop >= 1.5 you can load the core jQuery library in any controller using:

$this->addJquery();

prior to loading your jQuery plugin. If you want to load an older or newer version you should use (replacing version with the desired one):

Controller::addJquery('1.3.1');

If the file is not available on your server, PrestaShop will try downloading it from the Google servers.

Source:

[To see links please register here]

By default, Prestashop already has jquery library. So, you just add your auto.js file to your module.
>Do not use header Hook to load js file or css file. When you do that, it will load all pages even if it is not your module which is not good practise.

public function setMedia(){
parent::setMedia();
$this->addJqueryPlugin('type your plugin');
}
OR

public function setMedia()
{
parent::setMedia();
$this->context->controller->addJS(_MODULE_DIR_.$this->module->name.'/views/js/auto.js');
}

Good luck for you new module. :)