Codigo Autocompletado

Chuckyz0r · #1 (**permalink**) 15/11/2015, 20:14

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);

Chuckyz0r · #2 (**permalink**) 28/11/2015, 21:18

Alguien que me pueda ayudar con esto pls

Alexis88 · #3 (**permalink**) 29/11/2015, 00:02

Te recomiendo utilizar el widget autocomplete de jQuery UI. Hace un tiempo hice un ejemplo con dicho widget en el cual lograba tomar hasta cinco datos a partir de una búsqueda. Pasa a verlo aquí.

Un saludo