Jquery Ajax Auto Complete
HTML :
<input type="text" name="userid" />
JAVAASCRIPT :
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#userid').autocomplete({source:function(request,response){
jQuery.ajax({
type:'post',
url:'mgr.ajax.php',
dataType : "json",
data:{name_startsWith:request.term,mode:'GetUsersList'},
success:function(data)
{
console.log(data);
//alert(data);
response(jQuery.map(data,function(item){
return {
value:item.f_name+" "+item.l_name+" [ ID : "+item.mem_id+" ] ",
userid:item.mem_id
}
}));
}
});
},
autoFocus: true,
minLength:1,
select:function(event,ui){
jQuery('input[name=user_id]').remove();
jQuery('<input>').attr({
type: 'hidden',
id: 'user_id',
name: 'user_id',
value:ui.item.userid
}).appendTo('form#data_form');
}
});
});
</script>
PHP :
$row['f_name']="Vibhas";
$row['l_name']="Bhingarde";
$row['mem_id']="1453";
$row_set[] = $row;
echo json_encode($row_set);
OR
$response=array(array("name"=>"Vibhas","value"=>"Vibhas1"));
echo json_encode($response);
Note : Make Sure it should be array of array