Intento resolver cómo hacer el autocompletar con jQuery UI, no veo el error. ¿Me podrán ayudar? Veo en la consola que, si por ejemplo escribo código "333.." me aparecen los dos arreglos que empiezan con ese código, pero no los muestra en la vista.
Éste es mi controlador:
public function getarticulos() {
$q = trim($this->input->get('term'));
$productoresult = $this->articulo_model->find($q);
$result = array();
foreach ($productoresult as $i =>$articulo) {
$result[$i]['id'] = $articulo->id;
$result[$i]['codigo'] = $articulo->codigo;
$result[$i]['descripcion'] = $articulo->descripcion;
$result[$i]['precioactual'] = $articulo->precioactual;
}
echo json_encode($result);
}
Éste es el modelo:
public function find($q){
return $this->db->query("select * from articulo where codigo like '%$q%'")->result();
}
Ésta es la vista:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sistema Stock</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/chosen.min.css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/mystyle.css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/jquery-ui.css" media="screen" />
<script src="<?php echo base_url(); ?>js/jquery-1.11.1.min.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>js/chosen.jquery.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery-ui.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("[name=codigo]").autocomplete({
source: "<?php echo base_url() ?>index.php/articulo/getarticulos",
minLength: 3,
select: function( event, ui ) {
if(ui.item.id){
$("[name=codigo]").val(ui.item.codigo);
return false;
}
},
search: function (event, ui ){
$("[name=codigo]").val(0);
}
});
});
</script>
<div class="form-group">
<div class="col-xs-6">
<div class='input-group'>
<span class="input-group-addon"><span class="glyphicon glyphicon-tag"></span></span>
<input id="txtcodigo" name="codigo" type="text" placeholder="Codigo" value="" class="form-control" required="">
</div>
</div>
</div>
editado-- HICE UNOS CAMBIOS y ahora m muestra la lista, pero cuando selecciono, como tendría q ser? quiero q se guarde el valor del código y del id en los campos correspondientes,muestro como hice la función select: function( event, ui ) pero no devuelve el valor:
CAMBIE LA VISTA
$(function() {
var cache = {};
$( "#txtcodigo" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var menus = new Array();
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.getJSON( "<?php echo base_url() ?>index.php/articulo/getarticulos", request, function( result, status, xhr ) {
cache[ term ] = result;
var count = result.length;
console.log(result);
console.log(count);
for (var i = 0; i < count; i++) {
menus[i] = { codigo: result[i].codigo, id: result[i].id, descripcion:result[i].descripcion};
console.log(menus[i]);
cache[ term ][i] = result[i].codigo;
}
response(result);
});
},
select: function( event, ui ) {
$("#txtcodigo").val(ui.item.codigo);
$("#txtid").val(ui.item.id);
return false;
}
});
});
<label for="txtcodigo">Codigo: </label>
<input id="txtcodigo">
<label for="txtid">id: </label>
<input id="txtid">
autocomplete
que es jQuery UI.$q
, y luego se usa en una consulta dinámica (no preparada). Deberías escapar o hacer bindings de esa variable (lee sobre esto en la documentación de CodeIgniter.