jquery UI を使用してオートコンプリートを作成しようとしています。ユーザーが検索ボックスに情報を入力すると、ajax 呼び出しが行われます。サーバーは、json で構造化された html を返します。これが私のコードです。Webで見つけたチュートリアルに基づいてこれを取得しました
サーバー側コード
public function user_lookup() {
if($this->request->is('ajax')) {
$this->autoRender=false;
$users=$this->User->find('all',array('conditions'=>array('User.username LIKE'=>'%'.$_GET['term'].'%')));
$i=0;
foreach($users as $user){
$response[$i]['value']=$user['User']['username'];
$response[$i]['label']="<img class='avatar' width='24' height='24' src=''/>
<span class='username'>".$user['User']['username']."</span>";
$i++;
}
echo json_encode($response);
}
}
jqueryコード
$(document).ready(function() {
// Caching the movieName textbox:
var username = $('#SearchUsername');
// Defining a placeholder text:
username.defaultText('Search for people');
// Using jQuery UI's autocomplete widget:
username.autocomplete({
minLength : 1,
source : URLSITESUFFIX+'/users/user_lookup'
});
});
// 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();
};
とhtml
<?php echo $this->Form->create('ProjectsUser'); ?>
<?php echo $this->Form->input('Search.username'); ?>
<?php echo $this->Form->end();?>
ただし、結果は html をレンダリングする代わりにリテラル テキストを返します。スクリーンキャストを追加しました http://screencast.com/t/OhgPHpTWVe