1
これは一日中動作するようにしています。ネット上で見ていた修正はまだ運がない。だから私はあなたにそれを持って来る:)。基本的に4つのファイルがあります - オートコンプリートコントローラ、autocomplete.js、autocomplete.css、default.ctp。Jquery、JSON、Cakephp質問オートローダーUI
これはチュートリアルから得て、基本的に修正しようとしました。基本的には、ドロップダウンが設定されているかどうかに応じて、ユーザーが検索ボックスに入力を開始するときに、小売業者またはバウチャーを表示することです。現時点では、小売業者に焦点を当てるだけで、どのように私はまだ他のビットを行うことができますかわからない。
オートコンプリートコントローラ：
> 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>
...私はオートコンプリートの検索aswellのためのいくつかを表示する必要がありますね。
もしあなたがmroe情報を必要とするなら、私は前もって感謝します。おかげ クリスは
あなたの実際のコントローラファイルにはシェブロンが含まれていませんか？ – Leo