[mascha]

Dear All,

i want  to create function add total product, the scenario is user just input code_product then some field like as name, description and netto show with autocomplete and then, finaly user just  input total. 

can you help me, how ti autocomplete data on multiple fields with grocery crud??

 

i mean , this problem is i want to implement  this article autocomplete-data-on-multiple-fields-with-jquery-and-ajax/  on grocerry crud

 

 

 my code is

public function add_produks_()
    {
        try{
            $crud = new grocery_CRUD();

            
            $crud->set_table('product');
            $crud->columns('code_product','name_product','description','netto','total');
                $this -> db -> select ('code,description');
                $this->db->where('fk_lookup_grp =2');
                $query = $this -> db -> get('lookup');
                $finalArray = array();
                foreach ($query->result_array() as $row)
                {
                $finalArray[$row['code']] = $row['description']; 
                }

            $crud->field_type('code_product','dropdown', $finalArray);
            $output = $crud->render();

            $this->_example_output($output);

        }catch(Exception $e){
            show_error($e->getMessage().' --- '.$e->getTraceAsString());
        }
    }

[Amit Shah]

Well 1st of all sorry to say but the URL shared aint working. Anyways, didnt get much out from the code.. but what i understand out here is there are a certain field where the user starts typing in the product name and you wana do is autocomplete that one - plus u want to populate the other fields basis the same. Well you need to write the same through custom JS and API type call to a controller. 

Hook the JS for the changes on the field where user types in the product name.

Have a product code field in the add / edit but keep it hidden. For add -default value for product code should be blank.

You may turn other 2 fields which u want it to be auto populated be readonly so you may populate the same programatically but not let user edit the same.

 

Here is a simple example as how you may go about achieving he same ... http://phppot.com/jquery/jquery-ajax-autocomplete-country-example/

You may need to do some callback_field - to alter the product name field - where u can arbitrarily add the DIV for the dropdown. (as given as an example in the link above).

 

As from the example above - once user have selected the product - hit back the server with the selected product code and retrieve the description and stuff as required. Programatically populate the other fields (description / product code, etc).

 

Hope this helps you achieve your desired result.

 

Happy GCing :)

[mascha]

Hi Amit Shah,

Many Thank u for your replay, i implement your link (sample auto complete) its great, autocomplete is working on form add when i.m type some letter on filed kode barang showing sugestion and then i'm choice 1 sugestion 3 field other automatic filled

But i have problem when edit data, when i'm edit data  field kode product and 3 field other become empty. so my question in how to edit mode field kode product and 3 field other not empty 

 

1. field kode barang,auto complete is working https://photos.app.goo.gl/RpKpPMVfiUnEARLq2

2.when choice 1 sugestion triger 3 field other to filled  https://photos.app.goo.gl/mMDr59Z07y4X4Pv53

3.data succes to save on database and show to grid https://photos.app.goo.gl/fFcklaU3SH7Lg0k43

4. this problem when edit data , field kode barang and 3 other be empty --> https://photos.app.goo.gl/72jbbBBzESQyBYNv1

controller

public function add_barang_masuk()
       {
        try{
            $crud = new grocery_CRUD();

            //$crud->set_theme('flexygrid');
            $crud->set_table('barang_masuk');
            $crud->order_by('id_brg_masuk');
            $crud->required_fields('kode_barang');
            $crud->field_type('status_approval', 'hidden', '2');
               
            //dropdownlist kode barang
            $this -> db -> select ('code,description');               
            $this->db->where('fk_lookup_grp =2');
            $query = $this -> db -> get('lookup');
            $kdbarangArray = array();
            foreach ($query->result_array() as $row)
            {
            $kdbarangArray[$row['code']] = $row['description']; 
            }

            //dropdownlist divisi
            $this -> db -> select ('id_divisi,divisi');
            $query = $this -> db -> get('divisi');
            $divisiArray = array();
            foreach ($query->result_array() as $row)
            {
            $divisiArray[$row['id_divisi']] = $row['divisi']; 
            }

            //Autocomplete
            $this -> db -> select ('kode_barang,nama_barang');       
            $query = $this -> db -> get('master_barang');
            $barangArray = array();
            foreach ($query->result_array() as $row)
            {
            $barangArray[$row['kode_barang']] = $row['nama_barang']; 
            }


            $crud->field_type('barang_diterima_dari','dropdown', $divisiArray);
            $crud->callback_field('kode_barang',array($this,'field_callback_2'));
            $crud->callback_field('nama_barang',array($this,'field_callback_3'));
            $crud->callback_field('satuan',array($this,'field_callback_4'));
            $crud->callback_field('netto',array($this,'field_callback_5'));
            //$crud->callback_field('status_approval',array($this,'field_callback_6'));
            $crud->callback_after_insert(array($this, 'log_user_after_insert'));

            $output = $crud->render();
            $output->title = "Form Input Barang Masuk";
            $output->meta_keywords = "Something 2";
            $this->_example_output($output);

        }catch(Exception $e){
            show_error($e->getMessage().' --- '.$e->getTraceAsString());
        }
    }



function field_callback_2($value = '', $primary_key = null)
{
return '<input type="search" class="autocomplete nama" id="autocomplete1" name="kode_barang" width=200px />';    
}

function field_callback_3($value = '', $primary_key = null)
{
return '<input type="text" class="autocomplete" id="v_nama" name="nama_barang" readonly="true"/>';    
}

function field_callback_4($value = '', $primary_key = null)
{
return '<input type="text" class="autocomplete" id="v_satuan" name="satuan" readonly="true" />';            
}
function field_callback_5($value = '', $primary_key = null)
{
return '<input type="text" class="autocomplete" id="v_netto" name="netto" readonly="true"/>';            
}
function field_callback_6($value = '', $primary_key = null)
{
return '<input type="text"  name="status_approval" readonly="true" value="1"/>';            
}

function log_user_after_insert($post_array,$primary_key)
{
$user_logs_insert = array(
"id_log" => $primary_key,
"user_id" => $this->session->userdata('nama_lengkap') ,
"created_date" => date('Y-m-d H:i:s'),
"description" => 'Input Barang'
);
 
$this->db->insert('audit_trail',$user_logs_insert);
 
return true;
}

view

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php 
foreach($css_files as $file): ?>
	<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
	<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

<!-- Memanggil file .js untuk proses autocomplete -->
    <!--script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery-1.8.2.min.js'></script-->
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery.autocomplete.js'></script>

    <!-- Memanggil file .css untuk style saat data dicari dalam filed -->
    <link href='<?php echo base_url();?>assets/js/jquery.autocomplete.css' rel='stylesheet' />

    <!-- Memanggil file .css autocomplete_ci/assets/css/default.css -->
    <link href='<?php echo base_url();?>assets/css/default.css' rel='stylesheet' />
<script type='text/javascript'>
        var site = "<?php echo site_url();?>";
        $(function(){
            $('.autocomplete').autocomplete({
                serviceUrl: site+'/autocomplete/kode_barang',
                onSelect: function (suggestion) {
                    $('#v_nama').val(''+suggestion.nama); 
                    $('#v_netto').val(''+suggestion.netto); 
                    $('#v_satuan').val(''+suggestion.satuan); 
                }
            });
        });
</script>
</head>
<body>
	
	<div style='height:20px;'></div>  
    <div>
    <?php echo $title;?> 
		<?php echo $output; ?>
	
    </div>
</body>
</html>

[Amit Shah]

Well .. u 4got to set the values :) .. those u need to set it like the following

function field_callback_2($value = '', $primary_key = null)
{
return '<input type="search" class="autocomplete nama" id="autocomplete1" name="kode_barang" width=200px value="' . $value . '" />'; 
}

When in add - it anyways will remain blank. .but with edit - it will be set to whatever was the value available for the same. If for the field - you have an ID and u wana set the value - then in the callback u need to pull the value based on that ID and set it in the value option above..

 

Hope this resolves your issue.

 

Happy GCing :)

[mascha]

great, its work, many thank u Amit Shah : )