jQuery UI Autocomplete with CI ??

[eluser]seanloving[/eluser]
[quote author="goldorak" date="1276040359"]

Hi. Did you finally use the helper and hook?

I'm into a project which seems like yours since the datasource is a Mysql Database and the use of the new ui autocomplete would be great. seanloving, Would you share the complete code modified to your needs, please?

I am looking for a Google kind of behaviour too, so when the result is clicked or we select it and press enter, the resulting page is shown.[/quote]

@goldorak-

I did not use the helper and the hook from the wiki. Instead, here is what I came up with, based on the help I got from @pickupman.

First you have to generate a form in which one of the elements is a text input field with class="productpicker".

I am using the Form Generation Library by @macigniter like this:

Code:

$this->form
          ->text('qty'.$item.'|qtyID', '', 'trim|numeric|max_length[2]', $this->input->post('qty'.$item), array('onkeyup'=>'amount(this.name.substr(3,2));shipping()','style'=>'width:20px;margin:0;border:0;background:none;',$this->input->post('readonly')=>'readonly','element_suffix' => '') )
          ->text('item'.$item.'|itemID', '', 'trim|max_length[12]', $this->input->post('item'.$item), array('style'=>'width:70px;margin:0;border:0;background:none;',$this->input->post('readonly')=>'readonly','class'=>'productpicker','element_suffix' => '') )
          ->text('desc'.$item.'|descID', '', 'trim|max_length[150]', $this->input->post('desc'.$item), array('style'=>'width:230px;margin:0;border:0;background:none;','element_suffix' => '') )
          ->text('discount'.$item.'|discountID', '', 'trim|max_length[4]', $this->input->post('discount'.$item), array('onkeyup'=>'amount(this.name.substr(8,2))','style'=>'width:50px;margin:0;border:0;background:none;text-align:center;', 'element_suffix' => '') )
          ->text('unit_price'.$item.'|unit_priceID', '', 'trim|max_length[50]', $this->input->post('unit_price'.$item), array('style'=>'width:50px;margin:0;border:0;background:none;text-align:right;','element_suffix' => '') )
          ->text('amount'.$item.'|amountID', '', 'trim|max_length[50]', $this->input->post('amount'.$item), array('ondblclick'=>'amount(this.name.substr(6,2))', 'style'=>'width:60px;margin:0;border:0;background:none;text-align:right;' );

Of course, you don't have to use the FGL, but the important thing is to use class="productpicker" for the text input field for which you want to enable autocomplete.

in .js file (or in header)...

Code:

$().ready( function() {    
        
        $(".productpicker").autocomplete({
            minLength: 1,
            source:
                function(req, add)
                {
                    $.ajax({
                        url: '<?php echo site_url('inventory/products/lookup');?>',
                        dataType: 'json',
                        type: 'POST',
                        data: req,
                        success:    
                            function(data)
                            {
                                if(data.response =='true')
                                {
                                    add(data.message);
                                }
                            }
                    });
                },
            select:
                function(event, ui)
                {
                    //var lineItem = this.id;
                    var lineItem = this.id.substr(4,1);
                    $('#desc'+lineItem+'ID').val(ui.item.description);
                    $('#unit_price'+lineItem+'ID').val(ui.item.price);
                    amount( lineItem );
                    total();
                    shipping();
                }
        });    
    });

the .js function above calls the following lookup controller...

Code:

function lookup()
    {
        // process posted form data (the requested product)
        $keyword = $this->input->post('term');
        $data['response'] = 'false'; //Set default response
        $query = $this->products_model->seek_products($keyword); //Search DB
        if( ! empty($query) )
        {
            //print_r[$row];
            $data['response'] = 'true'; //Set response
            $data['message'] = array(); //Create array
            foreach( $query as $row )
            {
                $data['message'][] = array( 'label'=> $row->product,
                                            'value'=> $row->product,
                                            'description'=>$row->description,
                                            'price'=>$row->price); //Add a row to array
            }
        }
        if(IS_AJAX)
        {
            echo json_encode($data); //echo json string if ajax request
        }
        else
        {
            $this->load->view('search/index',$data); //Load html view of search results
        }
    
    } // end of lookup

the lookup() controller calls the this model...

Code:

function seek_products( $part_number )
    {
        
        $query = $this->CI->db
            ->select( " product_id,
                        product,
                        description,
                        price",
                        FALSE)
            ->from('products')
            ->group_by('product')
            ->like('product', $part_number, 'both');
            
        return $query->get()->result();
    }

I hope this helps the CI community better understand how to use jQueryUI Autocomplete

-seanloving