vibhasbhingarde
6/16/2014 - 9:59 AM

Jquery Ajax Auto Complete

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