Окно поиска с автозаполнением при просмотре
Я новичок в CakePHP, я следовал руководству по реализации окна поиска с автозаполнением, и все прошло хорошо, окно поиска в View/ Pages / home.ctp работает, как и ожидалось, но мне действительно нужно поставить это окно поиска на моем Просмотрите / Terms/ index.ctp, и я не могу найти способ заставить его работать, здесь я вставляю весь сгенерированный код, я надеюсь, что кто-то может мне помочь, и заранее спасибо:
файл: Controller / TermsController.php
<?php
App::uses('AppController', 'Controller');
class TermsController extends AppController {
public $helpers = array('Js'=>'Jquery', 'Form', 'Html');
public $components = array('Paginator', 'RequestHandler', 'Session');
public function getdata($id = null){
$this->Term->id = $id;
if(!$this->Term->exists()):
throw new NotFoundException("El terme no existeix");
endif;
$this->set('term', $this->Term->read(null, $id));
$this->layout = 'ajax';
}
public function autocomplete(){
$this->set('terms', $this->Term->find('all',
array('conditions' => array(
'Term.entry LIKE' => $this->request->query['term'].'%'),
'fields' => array('id', 'entry')
)
));
$this->layout = 'ajax';
}
public function index() {
$this->Term->recursive = 0;
$this->set('terms', $this->Paginator->paginate());
}
}
file: View/ Pages / home.ctp (тот, который работает)
<?php $this->layout = 'default';?>
<?php echo $this->Form->create(null,array());
echo $this->Form->input('word', array('label' => 'Cerca entrada'));
$this->Form->end('Cerca'); ?>
<div id="results"></div>
<script type="text/javascript">
var js = jQuery.noConflict();
(function($){
js(document).ready(function(){
js("#results").hide();
//Autocomplete
js( "#word" ).autocomplete({
source: "terms/autocomplete",
minLength: 3,
focus: function(event, ui){
js("#word").val(ui.item.Term.entry); return false;
},
select: function( event, ui ) {
js( "#word" ).val(ui.item.Term.entry);
var id = ui.item.Term.id;
$.ajax({
url: 'terms/getdata/'+id,
dataType: 'json',
success: function(data){
var html = '<div class="lemma_tag">';
html += '<h2>Lemes i etiquetes</h2>';
html += '<p>'+data.Term.lemma_tag+'</p>';
html += '<p><a href="terms/view/'+id+'">Més accions</a></p>';
html += '</div>';
js("#results").html(html);
js("#results").show('blind');
}
});
return false;
}
//select
}).data( "ui-autocomplete" )._renderItem = function(ul, item){
return $("<li></li>")
.data("ui-autocomplete-item", item)
.append("<a>" + item.Term.entry + "</a>")
.appendTo(ul)
};
//Autocomplete.end
});
})(jQuery);
</script>
file: View/ Terms/ autocomplete.ctp
<?php echo $this->Js->object($terms);?>
file: View/ Terms/ getdata.ctp
<?php echo $this->Js->object($term); ?>
file: View/ Terms/ index.ctp (вот где это не работает, я вставляю весь файл, чтобы вы имели представление о том, чего я пытаюсь достичь)
<div class="terms index">
<h2><?php echo __('Terms'); ?></h2>
<table cellpadding="0" cellspacing="0">
<tr>
<th><?php echo $this->Paginator->sort('id'); ?></th>
<th><?php echo $this->Paginator->sort('entry', 'Entrada'); ?></th>
<th><?php echo $this->Paginator->sort('lemma_tag', 'Lemes i etiquetes'); ?></th>
<th><?php echo $this->Paginator->sort('status', 'Estat'); ?></th>
<th class="actions"><?php echo __('Actions'); ?></th>
</tr>
<?php foreach ($terms as $term): ?>
<tr>
<td><?php echo h($term['Term']['id']); ?> </td>
<td><?php echo h($term['Term']['entry']); ?> </td>
<td><?php echo h($term['Term']['lemma_tag']); ?> </td>
<td><?php echo h($term['Term']['status']); ?> </td>
<td class="actions">
<?php echo $this->Html->link(__('View'), array('action' => 'view', $term['Term']['id'])); ?>
<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $term['Term']['id'])); ?>
<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $term['Term']['id']), array(), __('Are you sure you want to delete # %s?', $term['Term']['id'])); ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<p>
<?php
echo $this->Paginator->counter(array(
'format' => __('Page {:page} of {:pages}, showing {:current} records out of {:count} total, starting on record {:start}, ending on {:end}')
));
?> </p>
<div class="paging">
<?php
echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
echo $this->Paginator->numbers(array('separator' => ''));
echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
?>
</div>
</div>
<div class="actions">
<h3><?php echo __('Actions'); ?></h3>
<ul>
<li>
</li>
<li> </li>
<li><?php echo $this->Html->link(__('New Term'), array('action' => 'add')); ?></li>
<li> </li>
<li>
<?php $this->layout = 'default';?>
<?php echo $this->Form->create(null,array());
echo $this->Form->input('word', array('label' => 'Cerca entrada'));
$this->Form->end('Cerca'); ?>
<div id="results"></div>
<script type="text/javascript">
var js = jQuery.noConflict();
(function($){
js(document).ready(function(){
js("#results").hide();
//Autocomplete
js( "#word" ).autocomplete({
source: "terms/autocomplete",
minLength: 3,
focus: function(event, ui){
js("#word").val(ui.item.Term.entry); return false;
},
select: function( event, ui ) {
js( "#word" ).val(ui.item.Term.entry);
var id = ui.item.Term.id;
$.ajax({
url: 'terms/getdata/'+id,
dataType: 'json',
success: function(data){
var html = '<div class="lemma_tag">';
html += '<h2>Lemes i etiquetes</h2>';
html += '<p>'+data.Term.lemma_tag+'</p>';
html += '<p><a href="terms/view/'+id+'">Més accions</a></p>';
html += '</div>';
js("#results").html(html);
js("#results").show('blind');
}
});
return false;
}
//select
}).data( "ui-autocomplete" )._renderItem = function(ul, item){
return $("<li></li>")
.data("ui-autocomplete-item", item)
.append("<a>" + item.Term.entry + "</a>")
.appendTo(ul)
};
//Autocomplete.end
});
})(jQuery);
</script>
</li>
<li> </li>
<li>
<?php echo $this->Upload->view('Term', $term['Term']['id']); ?>
</li>
</ul>
</div>
Решение:
Для тех, кто сталкивается с этой же проблемой, вторая часть замечательного ответа @Salines - это та, которая заставляет его работать: echo $this->Form->input('word', array('id'=>'word','label' => 'Cerca entrada')); предложенные первые изменения не обязательны.
1 ответ
Решение
Попробуйте заменить эту строку кода:
source: "terms/autocomplete",
...
url: 'terms/getdata/'+id,
в этом:
source: "<?php echo $this->Html->url(array('controller' => 'terms','action' => 'autocomplete'),true);?>",
url: "<?php echo $this->Html->url(array('controller' => 'terms','action' => 'getdata'),true) .'/';?>" +id,
Чтобы понять разницу, если поставить статический путь "terms/autocomplete"в вашем коде javascript, то с вашей домашней страницы javascript имеет правильный post / get url, но когда вы находитесь на странице терминов, javascript сгенерировал url, например / term / Terms/autocomplete.
Обновление: добавьте id="word" в поле ввода
echo $this->Form->input('word', array('id'=>'word','label' => 'Cerca entrada'));