Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Auto complete

Estas en el tema de Auto complete en el foro de Frameworks JS en Foros del Web. Hola, llevo todo el dia probando scripts y tengo muchas dudas y estan muy compliacdos los scripts, me gustaría saber si hay algun ejemplo sencillo ...
  #1 (permalink)  
Antiguo 18/10/2005, 18:27
 
Fecha de Ingreso: mayo-2005
Mensajes: 84
Antigüedad: 19 años, 5 meses
Puntos: 0
Información Auto complete

Hola, llevo todo el dia probando scripts y tengo muchas dudas y estan muy compliacdos los scripts, me gustaría saber si hay algun ejemplo sencillo del autocompletar, de todos los que vi encontre el de google suggest, pero hacia cosas que no queria y no lo pude hacer correr en el servidor y por otro lado vi el de http://script.aculo.us/demos/ajax/autocompleter pero no viene el codigo, ahora que si:

# view
Just a little test:
<%= text_field_with_auto_complete :contact, :name %>

# controller
auto_complete_for :contact, :name

Es todo el codigo, estoy verdaderamente perdida.

Realmente este ejemplo es el que necesito, yo uso php en esre caso, pero se me complica bastante entender que es lo que hace y como lo hace, si alguien a usado este ejemplo ya, les pido su ayuda.
  #2 (permalink)  
Antiguo 19/10/2005, 00:57
 
Fecha de Ingreso: diciembre-2003
Mensajes: 218
Antigüedad: 20 años, 11 meses
Puntos: 0
Buenas, este codigo yo tb lo estuve mirndo y parece ser q es Rails (otro lenguaje).

http://weblogs.macromedia.com/mxna/e...a_suggest.html

index.html
Código PHP:
<html>
    <
head>
        <
title>MXNA Suggest</title>
        <
style>
            
body
            
{
                
background#fff;
                
font-familyHelveticaArialsans-serif;
                
font-size13px;
                
text-aligncenter;
            }

            
#header
            
{
                
margin-bottom10px;
                
background#90ACC8;
            
}
            
            
#textInput {
                
width300px;
            }

            
#inputWrapper {
                
padding-top200px;
            }

            
#suggestion
            
{
                
width300px;
                
margin-leftauto;
                
margin-rightauto;
            }
            
            
#suggestion_table
            
{
                
border-width0 1px 1px 1px;
                
border-stylesolid;
                
border-color#ddd;
                
width298px;
            }
            
            .
row
            
{
                
width298px;                
            }

            .
left_cell
            
{
                
floatleft;
                
padding-left1px;
                
width198px;
                
text-alignleft;
            }

            .
right_cell
            
{
                
floatright;
                
padding-right1px;
                
colorgreen;
                
width98px;
                
text-alignright;
            }

        </
style>
        <
script type="text/javascript" src="/javascript/XMLUtil.js"></script>
        <script type="text/javascript" src="/javascript/replaceHTML.js"></script>
        <script type="text/javascript" src="/javascript/BrowserDetection.js"></script>

        <script type="text/javascript">

            var xmlUtil = new XMLUtil();
            var bd = new BrowserDetection();
            var http;
            var winRet = /\r\n$/;
            var unxRet = /\n$/;
            var domainRe = /http:\/\/(.+?)\//;
            var domain = domainRe.exec(document.location)[1];
            var currentRow = -1;
            var resultArray = new Array();
            var currentTerm = null;
            var key;
            function handleKeyPress(e)
            {
                // IE
                if(window.event)
                {
                    key = e.keyCode;
                }
                // Moz
                else
                {
                    key = e.which;
                }

                // Scrolling
                if ((key == 38 || key == 40) && resultArray.length > 0)
                {                    
                    if (key == 38)
                    {
                        if (currentRow != 0)
                        {
                            inRow(currentRow - 1);
                        }
                    }
                    else
                    {
                        if (currentRow != (resultArray.length - 1))
                        {
                            inRow(currentRow + 1);
                        }                    
                    }
                    return;
                }
                
                if (key == 8 || (key >= 48 && key <= 90))
                {
                    var searchTerm = document.getElementById('textInput').value;
                    if (searchTerm.length > 0)
                    {
                        searchMxna(document.getElementById('textInput').value);
                    }
                    else
                    {
                        populateResults('');
                    }
                }
                
                // Enter
                if (key == 13)
                {
                    gotoMxna();
                    return;
                }
                
                // Escape
                if (key == 27)
                {
                    close();
                    return;
                }
            }

            function searchMxna(hint)
            {
                http = xmlUtil.getXMLHTTPObject();
                http.open('GET', 'http://'+domain+'/mxna/experimental/getSearchTerms.cfm?limit=10&hint='+escape(hint), false);
                http.send(null);
                handleSearchResults();
            }
            
            function handleSearchResults()
            {
                if (http.readyState == xmlUtil.COMPLETE && http.status == 200)
                {
                    var res = http.responseText;
                    resultArray = new Array();
                    
                       if (res.search(winRet) != -1)
                       {
                           res = res.substring(0, res.length - 2);
                       }
                       else if (res.search(unxRet) != -1)
                       {
                           res = res.substring(0, res.length - 1);    
                       }
                       
                    var html = new String();
                    if (res.length > 0)
                    {
                        resultArray = res.split('\n');
                        html += '<div id="suggestion_table">';
                        for (var i = 0; i < resultArray.length; ++i)
                        {
                            var term = resultArray[i].substring(0, resultArray[i].indexOf('\t'));
                            var ranking = resultArray[i].substring(resultArray[i].indexOf('\t') + 1, resultArray[i].length);
                            html += '<div class="row" id="row_'+i+'" onMouseOver="inRow('+i+')" onClick="gotoMxna();">';
                            html += '<div class="left_cell" id="left_cell_'+i+'">'+term+'</div>';
                            html += '<div class="right_cell" id="right_cell_'+i+'">'+ranking+'</div>';
                            html += '</div>';
                            if (!bd.isIE)
                            {
                                html += '<br/>';    
                            }
                        }
                        html += '</div>';
                        populateResults(html);
                        inRow(0);
                    }
                    else
                    {
                        html = '<strong>No suggestions found.</strong>';    
                        populateResults(html);
                    }
                }
            }
            
            function populateResults(val)
            {
                replaceHTML('suggestion', val);
            }
            
            function close()
            {
                replaceHTML('suggestion', '');    
            }
            
            function changeRowColor(id, fgColor, bgColor)
            {
                document.getElementById('left_cell_'+id).style.backgroundColor = bgColor;
                document.getElementById('right_cell_'+id).style.backgroundColor = bgColor;
                document.getElementById('row_'+id).style.backgroundColor = bgColor;
                document.getElementById('right_cell_'+id).style.color = fgColor;
            }
            
            function inRow(id)
            {
                if (currentRow != -1)
                {
                    changeRowColor(currentRow, 'green', '#fff');
                }
                currentRow = id;
                currentTerm = resultArray[currentRow].substring(0, resultArray[currentRow].indexOf('\t'));
                changeRowColor(currentRow, '#fff', '#90ACC8');
                if (key != 8)
                {
                    autoComplete();
                }
            }
// Funcion que conecta con la pagina de consulta.
            function gotoMxna()
            {
                if (resultArray.length == 0 ||
                    currentRow == -1)
                {
                    return;
                }
                document.location = 'http://'+domain+'/mxna/index.cfm?searchterms='+escape(currentTerm)+'&query=bySimpleSearch';
            }
            
            function autoComplete()
            {
                if (bd.isSafari)
                {
                    return;    
                }

                var textInput = document.getElementById('textInput');
                var startVal = textInput.value;
                textInput.value = currentTerm;


                if (!bd.isIE)
                {
                    textInput.setSelectionRange(startVal.length, currentTerm.length);
                }
                else
                {
                    var range = textInput.createTextRange();
                    range.moveStart("character", startVal.length);
                    range.moveEnd("character", currentTerm.length);
                    range.select();    
                }
            }
            
            function init()
            {
                document.getElementById('textInput').focus();    
            }
            
            window.onload = init;
            
        </script>
    </head>
    <body>
        <div id="inputWrapper">
            <div id="header">
                <img src="../images/logo.gif" width="169" height="49" border="0"/>
            </div>
            <input type="text" id="textInput" onKeyUp="handleKeyPress(event);" autocomplete="off"/><br/>

            <div id="suggestion"></div>
        </div>
    </body>
</html> 
XMLUtil.js
Código PHP:
function XMLUtil()
{
    
this.UNINITIALIZED 0;
    
this.LOADING       1;
    
this.LOADED        2;
    
this.INTERACTIVE   3;
    
this.COMPLETE      4;
    
this.isIE = (document.implementation.createDocument) ? false true;
}

XMLUtil.prototype.getXMLHTTPObject = function()
{
    if(
this.isIE)
    {
        return new 
ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        return new 
XMLHttpRequest();
    }
}

XMLUtil.prototype.getDOM = function()
{
    if (
this.isIE)
    {
        return new 
ActiveXObject("Microsoft.XMLDOM");
    }
    else
    {
        return new 
DOMParser();
    }
}

XMLUtil.prototype.getDOMFromString = function(xmlStr)
{
    var 
xmlDom this.getDOM();
    if (
this.isIE)
    {
        
xmlDom.async 'false';
        
xmlDom.loadXML(xmlStr);
        return 
xmlDom;
    }
    else
    {
        return 
xmlDom.parseFromString(xmlStr'text/xml');
    }
}

XMLUtil.prototype.getText = function(elem)
{
    if (
this.isIE)
    {
        return 
elem.text;
    }
    else
    {
        return 
elem.textContent;
    }

replaceHTML.js

Código PHP:
function replaceHTML(idNamecontent)
{
    var 
target document.getElementById(idName);    
    
target.innerHTML content

Browserdetection.js
Código PHP:
function BrowserDetection()
{
    var 
isIEisMozillaisSafariisOpera false;
    if (
navigator.userAgent.indexOf('MSIE') != -1)
        
this.isIE true;
    else if (
navigator.userAgent.indexOf('Safari') != -1)
        
this.isSafari true;
    else if (
navigator.userAgent.indexOf('Opera') != -1)
        
this.isOpera true;
    else
        
this.isMozilla true;

El fichero q realiza la consulta ha de tener el siguiente formato.

Código:
ajax	277
amfphp	38
actionscript	25
actionscript 3	24
asdt	22
arp	19
actionstep	17
avalon	17
apple	16
aggregator	11
Espero q te sea util.

Un saludo.
__________________
SymbianForever
SymbianForever.com, todo sobre y para tu symbian
aNieto2K | Themes para WordPress
De todo un poco
  #3 (permalink)  
Antiguo 21/10/2005, 12:17
 
Fecha de Ingreso: mayo-2005
Mensajes: 84
Antigüedad: 19 años, 5 meses
Puntos: 0
Gracias

Gracias mue fue de utilidad para otra cuestion, pero ahora me tope con un problema, por fin logré usar el script de http://script.aculo.us/demos/ajax/autocompleter el autocomplete funciona perfectamente y le pude manipular varias cosas, ahora el problema es que parece que dentro de sus 500 mil cosillas internas usa forms y si yo quiero meter ese campo en un form no me lo permite, que creen que pueda hacer?

Intente meter en un script el form pero no me lo permitio, si meto dicho campo deja de autocompletar y quedo como al inicio

Saludos.
  #4 (permalink)  
Antiguo 21/10/2005, 12:43
 
Fecha de Ingreso: mayo-2005
Mensajes: 84
Antigüedad: 19 años, 5 meses
Puntos: 0
Sonrisa Ya pude

Ya pude, gracias, todo lo aciones yo misma con las tonterias que le puse al autocomplete
  #5 (permalink)  
Antiguo 28/10/2005, 14:15
 
Fecha de Ingreso: agosto-2004
Mensajes: 349
Antigüedad: 20 años, 2 meses
Puntos: 3
Cita:
Iniciado por Dulce Alejandra
Ya pude, gracias, todo lo aciones yo misma con las tonterias que le puse al autocomplete
Podrías colgar el código, seguro que muchos estarían agradecidos (incuyéndome a mi)

Saludos
  #6 (permalink)  
Antiguo 03/11/2005, 09:13
 
Fecha de Ingreso: mayo-2005
Mensajes: 84
Antigüedad: 19 años, 5 meses
Puntos: 0
Claro

Puedes descargarlo completo con ejemplos desde la misma página en el area de descargar los scripts.

El mio quedo un poco revuelto, pero los de la página son claros


http://script.aculo.us/downloads

Espero les sirva.

Saludos
  #7 (permalink)  
Antiguo 03/09/2006, 23:31
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 4 meses
Puntos: 21
que debo hacer para que funcione con base de datos de mysql y php
__________________
gerardo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:30.