Hola a todos los jqueros hehehe, me preguntaba si me podria ayudar con esto. estoy tratando de hacer que cuando uno escriba "jQu" deberia salir desplegado para seleccionar "jQuery" y que cuando uno lo seleccione se quede en el primero input y que en un segundo input salga "23". espero me puedan ayudar, este es el codigo que tengo
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Autocompletar con Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="Plugin Gratis para autocompletar un input con jQuery y Ajax" name="description" />
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/autocomplete.jquery.js"></script>
<link type="text/css" rel="stylesheet" href="css/autocomplete.css"></link>
<script>
$(document).ready(function(){
/* Una vez que se cargo la pagina , llamo a todos los autocompletes y
* los inicializo */
$('.autocomplete').autocomplete();
});
</script>
</head>
<body>
<!-- Código del Autocompletar , todo el código html necesario estra entre estos comentarios -->
<div class="autocomplete">
<label style="display:block;">Seleccione una categoría:</label>
<input type="text" value="" data-source="search.php?search=" />
<input type="text" value="" />
</div>
<!-- fin de codigo autocompletar -->
</body>
</html>
Código Javascript
:
Ver original<?php
// limpio la palabra que se busca
$search= trim($_GET['search']);
// la busco
$result= search($search);
// seteo la cabecera como json
header('Content-type: application/json; charset=utf-8');
//imprimo el resultado como un json
echo json_encode($result);
function search($searchWord)
{
$tmpArray=array();
/**
* Obtengo los datos almacenados en el array
*/
$data=getData();
foreach($data as $word)
{
// obtengo el tamaño de la palabra que se busca.
$searchWordSize=strlen($searchWord);
// corto la palabra que viene del array y la dejo del mismo tamaño que
// la que se busca de manera de poder comparar.
$tmpWord=substr($word, 0,$searchWordSize);
// si son iguales la guardo para devolverla
if (strtolower($tmpWord) == strtolower($searchWord))
{
// guardo la palabra original sin cortar.
$tmpArray[]=$word;
}
}
return $tmpArray;
}
function getData()
{
$result=array();
$result[]='jQuery';
$result[]='Javascript';
$result[]='Imagenes';
$result[]='Galerias';
$result[]='Fotos';
$result[]='Efectos';
$result[]='Menus';
$result[]='Acordeon';
$result[]='Autocompletar';
$result[]='Sliders';
$result[]='PopUps';
$result[]='Clocks';
$result[]='Autoload';
$result[]='HTML5';
$result[]='CSS3';
$result[]='LightBox';
$result[]='Analytics';
$result[]='Analizador';
asort($result);
return $result;
}
Código Javascript
:
Ver original/**
* Plugin : Autocompletar con jQuery
* Autor : Lucas Forchino
* WebSite : http://www.tutorialjquery.com
* version : 1.0
* Licencia: Pueden usar libremenete este código siempre y cuando no sea para
* publicarlo como ejemplo de autocompletar en otro sitio.
*/
(function($){
// Creo la funcion en el prototype de jQuery de manera de integrarla
$.fn.autocomplete= function ()
{
//puede haber mas de un autocomplete que cargar por eso esto los levanta a todos
$(this).each(function(){
// aplico los estilos a los elementos elegidos
$(this).addClass('autocomplete-jquery-aBox');
// guardo en una variable una nueva funcion que asigna el texto del
// link que paso en that al input donde escribimos.
// esto seleccionaria el link del cuadro autocompletar
var selectItem = function(that)
{
// partiendo del link busco el input y le asigno el valor del link
$(that).parent().parent().find('input').val($(that).html());
// remuevo el cuadro de autocompletar, se supone si ya seleccionaste
// un valor no se necesita mas
$(that).parent().remove();
}
// busco el input y le asigno un evento al presionar una tecla
$(this).find('input').bind('keyup',function(event){
var input=$(this);
// codigo de la tecla persionada
var code=event.keyCode;
// si es Enter => seleccionar el link marcado
if (code==13 && $('.autocomplete-jquery-mark').size()>0)
{
var element=$('.autocomplete-jquery-mark').get(0);
selectItem(element);
}
// si son las flechas => moverse por los links
else if(code==40 || code ==38)
{
elements =$('.autocomplete-jquery-results').find('a');
var mark =0;
if ($('.autocomplete-jquery-mark').size()>0){
mark=$('.autocomplete-jquery-mark').attr('data-id');
$('.autocomplete-jquery-mark').removeClass('autocomplete-jquery-mark');
if (code==38){
mark --;
}else{
mark ++;
}
if (mark > elements.size()){
mark=0;
}else if (mark < 0){
mark=elements.size();
}
}
elements.each(function(){
if ($(this).attr('data-id')==mark)
{
$(this).addClass('autocomplete-jquery-mark');
}
});
}
// si es una letra o caracter, ejecutar el autocompletar
// con este filtro solo toma caracteres para la busqueda
else if((code>47 && code<91)||(code>96 && code<123) || code ==8 )
{
// si presiono me fijo si hay resultados para lo que tengo
// tomo la url
var url = input.attr('data-source');
// tomo el valor del combo actualmente
var value = input.val();
url+=value;
//busco en el server la info
$.getJSON(url,{}, function(data){
// si encontro algo
// creo un cuadro debajo del input con los resultados
input.parent().find('.autocomplete-jquery-results').remove();
var left = input.position().left;
var width= input.width();
var result=$('<div>');
// le damos algunos estilos al combo
result.css({'width':width});
result.css({'left':left});
result.addClass('autocomplete-jquery-results');
for(index in data)
{
//agrego un link por resultado
if(data.hasOwnProperty(index))
{
var a = $('<a>');
a.html(data[index]);
a.addClass('autocomplete-jquery-item');
var widthFixed=width - 3;
a.css({'width':widthFixed});
a.attr('href',"#");
a.click(function(){
// funcion que pone el texto en input
selectItem(this);
})
a.attr('data-id',index);
$(result).append(a);
}
}
if (data.length>0)
{
input.parent().append(result);
result.fadeIn('slow');
}
});
}
});
});
}
})(jQuery);