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



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

默认.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文件中单.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.

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

好的,所以它可以工作。修复了各种 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();
?>

最新更新