带有 Jquery 自动完成功能的 CakePhp 3.8 不起作用答案

【问题标题】：CakePhp 3.8 with Jquery autocomplete not working带有 Jquery 自动完成功能的 CakePhp 3.8 不起作用
【发布时间】：2019-11-23 00:42:22
【问题描述】：

我正在尝试使用自动完成 jquery 函数来完成具有以下两个源值之一的字段：['pere'、'mele']。不幸的是，它不起作用。

default.ctp

     <script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <!------ Include the above in your HEAD tag ---------->
    <?php echo $this->Html->script(['single']) ?>

在查看文件中

<?php echo $this->Form->create($societa); ?>       

<fieldset>
     <h1>Aggiungi Società</h1>


    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
        <?php echo $this->Form->control('nome_societa',['class'=>'form-control','required' => true]);?>  
        </div>  
    </div>
    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->control('nome_societa_abbreviato',['class'=>'form-control','required' => true]);?>  
        </div>  
    </div>
    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->control('sede',['class'=>'form-control','id'=>'naruto','required' => true]);?>  
        </div>  
    </div>
    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->control('cap',['class'=>'form-control','required' => true]);?>  
        </div>  
    </div>    
    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->control('citta',['class'=>'form-control']);?>  
        </div>  
    </div> 
    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->control('pr',['class'=>'form-control']);?>  
        </div>  
    </div> 

    <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
         <?php echo $this->Form->button(__('Salva'),['class'=>'btn btn-primary']);?>  
        </div>  
    </div>           
</fieldset> 
<?php echo $this->Form->end();?>  
<?php echo $this->Html->link('Indietro', ['action'=>'index'], ['class'=>'btn btn-primary']) ?>

在 js 文件 single.js 中

$(document).ready(function(){
    $("#naruto").autocomplete({
        source:['pere','mele']
    });    
});

在控制台谷歌浏览器中

A cookie associated with a cross-site resource at http://bootstrapcdn.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
add#:1 A cookie associated with a cross-site resource at http://forum.jquery.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
add#:1 A cookie associated with a cross-site resource at https://forum.jquery.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
add#:1 A cookie associated with a cross-site resource at http://jquery.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

不幸的是，即使控制台没有给出错误，该文件也无法正常工作

【问题讨论】：

试试 alert();在单个 js 文件的文档就绪功能中。
$('document').ready(function(){ alert(console.log($("#naruto").autocomplete({ source:['pere','mele'] }))); }); localhost: undefined 我不明白为什么它返回 undefined
@MdShifatulIslam 你怎么看？

标签： jquery-ui cakephp design-patterns jquery-ui-autocomplete cakephp-3.8

【解决方案1】：

好的，这样就可以了。修复了各种 Jquery UI 调用。解决了

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3">
<title>Calciotel</title>

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/litera/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<?php 
echo $this->Html->css(['jquery-ui.theme.min','jquery-ui.min','prova']);

echo $this->Html->script(['bootstrap.min','jquery-3.4.1.min','jquery-ui.min','prova','single','popper.min.js']);

echo $this->Html->meta('icon');
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->fetch('script');
echo $this->Html->charset();

?>

【讨论】：