Javascript 预置自动完成

我试图添加非常简单的自动完成功能到我的prestashop插件输入。我想要实现的是这样的目标：

city.php

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

问题是我不知道如何在prestashop中调用jquery库。我试图在我的插件类中添加如下内容：

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

---

如果运气不好…

在控制器中，您可以使用添加任何JS文件

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

所以，你可以把这个插件放到theme_文件夹/js/plugins/autocomplite.js中，然后用

$this->addJS（_theme_js_DIR.'plugins/autocomplite.js'）添加它

将“js”文件保存在模块的js文件夹中，并通过

$this->addJS（数组（_module\u DIR.$this->module->name./views/js/yourPlugin.js'）在模块控制器的setMedia函数中进行设置；

您可以使用主题名/js/autoload/your js file.js移动js文件。。Prestashop加载所有自动加载文件夹js文件。所以您可以使用它。

在Prestashop 1.6中，使用hook函数，您可以执行类似的操作（实际上我在自定义模块中使用它）：

如您所见，我添加了Fancybox、Bootstrap和DateTimePicker。 您应该在js目录、主题或模块中添加自己的插件

使用smarty（$js_dir，我猜，或者$tpl_dir），在主题中调用插件很容易

编辑：

以下是Prestashop中的autocomplete示例：

第三方物流：

假设您的php文件返回正确的值。首选使用自己的HTML，在主题中覆盖tpl

问题是我不知道如何调用jquery库 普雷斯塔索普

在Prestashop>=1.5中，您可以使用以下方法在任何控制器中加载核心jQuery库：

$this->addJquery();

在加载jQuery插件之前。如果要加载较旧或较新的版本，应使用（用所需版本替换）：

如果该文件在您的服务器上不可用，PrestaShop将尝试从Google服务器下载该文件

---

来源：

默认情况下，Prestashop已经有了jquery库。因此，只需将auto.js文件添加到模块中

不要使用头钩子加载js文件或css文件。当您这样做时，它将加载所有页面，即使不是您的模块，这是不好的做法

或

---

祝你新模块好运。：）

谢谢你，它非常适合我。不幸的是，当我试图调用autocomplete函数时，prestashop正在向输入字段添加autocomplete=“off”。你知道我如何修复它吗？你如何使用自动完成功能？我刚刚添加了一个使用自定义引导表单的autocomplete示例看看这个：[链接]谢谢，它非常适合我。不幸的是，当我试图调用autocomplete函数时，prestashop正在向输入字段添加autocomplete=“off”。你知道我怎么修吗？

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

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

$(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]+"";
});

$this->addJquery();

Controller::addJquery('1.3.1');

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

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