I am trying to make a autocomplete using jquery UI. How it works is when the users type information in the searchbox, a ajax call is made. The server then returns html structured in json. Here is my code. I got this based on a tutorial I found on the 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);
}
}
$(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();
};
<?php echo $this->Form->create('ProjectsUser'); ?>
<?php echo $this->Form->input('Search.username'); ?>
<?php echo $this->Form->end();?>
but the results returns literal text instead of rendering the html. i added a screencast http://screencast.com/t/OhgPHpTWVe
debug values http://screencast.com/t/YVXWug2Bynze