Я пытался заставить это работать весь день. Посмотрел в сети на починку, все равно не повезло. Так что я принесу это вам :). В основном получил 4 файла - контроллер автозаполнения, autocomplete.js, autocomplete.css, default.ctp.
Получил это из учебника и попытался в основном изменить. По сути, я хочу, чтобы пользователь начал вводить текст в поле поиска, где отображаются розничные продавцы или ваучеры, в зависимости от того, какое значение выбрано. В данный момент я просто сосредоточен на ритейлерах, так как не уверен, как мне это сделать, пока что, смеется.
контроллер автозаполнения:
> class AutocompleteController extends
> AppController { var $name =
> 'Autocompletes'; var $helpers =
> array('Ajax', 'Javascript'); var
> $components = array('RequestHandler');
> var $layout = 'default'; var
> $uses=array('Retailer','Voucher');
>
> function home(){ }
>
> function search(){ if (
> $this->RequestHandler->isAjax() ) {
> Configure::write ( 'debug', 1 );
> $this->autoRender=false; $query = $_GET['term'];
> $retailers=$this->Retailer->find('all',array('conditions'=>array('Retailer.title
> LIKE'=>'%'.$query.'%')));
> $i=0;
> foreach($retailers as $retailer){
> $response[$i]['value']=$retailer['Retailer']['title'];
> $response[$i]['label']="<span class=\"username\">".$retailer['Retailer']['title']."</span>";
> $i++;
> } echo json_encode($response); }else{ if (!empty($this->data)) {
> $this->set('Retailers',$this->paginate(array('Retailer.title
> LIKE'=>'%'.$this->data['Retailer']['title'].'%')));
> } } } }
autocomplete.js
$(document).ready(function(){
// Caching the movieName textbox:
var username = $('.search-text-field');
// Defining a placeholder text:
username.defaultText('Search for retailers');
// Using jQuery UI's autocomplete widget:
username.autocomplete({
minLength : 1,
source : 'autocomplete/search'
});
});
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}
autocomplete.css
.search-text-field{
padding: 2px;
padding-left: 5px;
width: 380px;
border: 2px solid #ff2f2f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* Styling the markup generated by the autocomplete jQuery UI widget */
ul.ui-autocomplete{
width:250px;
background-color:white;
border:1px solid gray;
margin-left:3px;
margin-top:-4px;
font-family:Helvetica, Arial,sans-serif;
}
ul.ui-autocomplete li{
list-style:none;
border-top:1px solid white;
border-left:1px solid white;
margin:0;
}
ul.ui-autocomplete li:first-child{
border-top:none;
}
ul.ui-autocomplete li:last-child{
border-bottom:none;
}
ul.ui-autocomplete li a{
border:none !important;
text-decoration:none !important;
padding:2px;
display:block;
color:black;
}
ul.ui-autocomplete li img{
margin-right:4px;
}
ul.ui-autocomplete li span{
}
#ui-active-menuitem{
background-color:#efefef;
cursor:pointer;
}
default.ctp
<head>
<?php echo $javascript->link("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");?>
<?php echo $javascript->link('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js');?>
<script src="http://htm5shiv.googlecode.com/svn/trunk/html5.js"></script>
<?php echo $html->css("/css/autocomplete.css"); ?>
<?php echo $javascript->link("/js/autocomplete.js");?>
</head>
<body>
<div class="search">
<?php echo $this->requestAction(array('controller'=>'autocomplete', 'action'=>'search'), array('return')); ?>
</div>
</body>...
Полагаю, я должен показать несколько для автозаполнения поиска ...
<?php echo $form->create('Search', array('action'=>'search'));?>
<div class="seatext">
<?php echo __('Search Amazing Voucher Codes',true); ?>
</div>
<div class="seadd">
<?php
$options = array('retailers'=>__('Retailer',true), 'vouchers'=>__('Voucher',true));
echo $form->select('search_type', $options, null, array('class'=>'search-dropdown'), false);?>
</div>
<div class="seabox">
<?php echo $form->input('search_data', array('title'=>'', 'class'=>'search-text-field', 'size'=>30, 'label'=>false, 'div'=>false)); ?>
</div>
<div class="search_but">
<?php echo $form->end( array('label'=>__('Search',true),'div'=>false,'class'=>'search-button'));?>
</div>
В тот момент, когда я печатаю, ничего не происходит, однако при поиске он выводит результаты на странице результатов.
Если вам нужна какая-то информация о мроу, я могу заранее ее поблагодарить. Спасибо
Chris