jquery autocomplete

jquery autocomplete

*****************************************
usual way. only get what you want
*****************************************

function getMaterial(e) { //call this function @ onclick event, once bind no need to call @ onkey... events.  
    $("#itm_" + e).autocomplete({ //bind to selected element.
        source: URL + "material_gin/getMaterial_auto", // change url to pass more arguments 
                // "material_gin/getMaterial_auto?from="+$('#from).val()+"&to="+$('#to').val()
                // then catch them from php as
                //    $from = $_GET['from'];
                //    $to = $_GET['to'];
        autoFocus: true,
        minLength: 1,
        select: function(event, ui) {
           // event.preventDefault(); uncomment this line if you want to change autocomplete line
            $('#areaTxt').val(ui.item.area);
            $('#distributorIDTxt').val(ui.item.parent);
            $('#tbl2').show();
        }
    });
}

////////////////////////////////////
@ php controller

public function getMaterial_auto() {
        $this->loadModel('material_gin', 'material_ginmodel/');
        $this->material_gin->getMaterial_auto(); // assoc array of items from model
        $json = array();
        foreach ($result AS $val) {
            array_push($json, array(
            "label" => $val->description, //every thing in label index will auto list at bind field. use event.preventDefault() to change it.
            "itemId" => $val->itemId,
            "unitPrice" => $val->unitPrice,
            "minim" => $val->minim));
        }
        echo json_encode($json);
    }

////////////////////////////////////
@model

public function getMaterial_auto() {
        $sql = "SELECT 
    packing_material_id,
    packing_material_name,
    packing_material_quantity,
    reorder_level,
    buffer_level
FROM
    packing_material pm
        inner join
    material m ON m.material_id = pm.packing_material_id
where
    packing_material_name like '%" + filter_input(INPUT_GET, 'term', FILTER_SANITIZE_STRING) + "%'"; // auto complete object pass every word that you are typing. you can catch it from above way or from $_GET['term'] 
        return $this->db->select($sql);
}
    
***************************************
2nd way. load all to javascript memmory.(only best for small list)
***************************************

var items;

$(document).ready(function() {
    $.get("getItems", function(data) {
        items = JSON.parse(data);
    });
});

function getMaterial(e) {
    $("#" + e).autocomplete({
        source: items,
        autoFocus: true,
        minLength: 1,
        select: function(event, ui) {
            $('#areaTxt').val(ui.item.area);
            $('#distributorIDTxt').val(ui.item.parent);
            $('#tbl2').show();
        }
    });
}