0

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

デバッグ値 http://screencast.com/t/YVXWug2Bynze

4

0 に答える 0