Jquery, JSON, Cakephp 질문 오토로더 UI

하루 종일 작동하도록 노력했습니다. 그물에 수정이 아직 행운이 없다면. 그래서 나는 그것을 당신에게 가져온다. :) 기본적으로 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>...

01,235 나는 그것이 결과 페이지에서 결과를 불러옵니다 검색 할 때 아무것도 그러나 발생하지 입력 할 때 16,

나는 순간

<?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 정보가 필요한 경우 사전에 감사를 표시 할 수 있습니다. 감사합니다 크리스

출처

2011-01-02 Chris

탐색 도구가 포함되어 있지 않습니다 실제 컨트롤러 파일을합니까? – Leo

소스 URL이 유효 '자동 완성/검색'이다 (당신이해야 할 수도 있습니다) '/ 자동 완성/검색'과 동일하지 있는지 확인합니다.
아약스가있는 분야를 염두에 두십시오. 스크립트가 $ _GET [ '용어']를 찾고 있습니다. 아직 그 필드 이름이 input.search-text-field인지는 알 수 없습니다.
나는 전송되는 아약스 데이터를보고 방화범을 사용합니다. 이러한 상황에서 이것은 매우 중요한 도구입니다.

출처

2011-01-06 21:58:47 jbrass

Jquery, JSON, Cakephp 질문 오토로더 UI

답변

관련 문제