Foros del Web - Ver Mensaje Individual

tuadmin · #53 (**permalink**) 05/04/2021, 19:47

En caso de necesitar algo moderno con HTML5 podrias optar por lo nativo
words.php

Código PHP:

Ver original<?php
/**
 * @autor tuadmin
 */
$words=array(
    "alberto",
    "ana",
    "bart",
    "barkley",
    "canasta",
    "canguro",
    "candidato",
    "canastasio",
    "cancerbero",
    "cantinero",
    "canaston",
    "canguron",
    "cantinflas",
    "cantinflon",
    "pedro",
    "pepe",
);
$palabra = @$_GET["buscar"] ?$_GET["buscar"]:'';
 
$lista_filtrada = array_filter($words,function($nombre) use( & $palabra){
    return stripos($nombre,$palabra)===0;
},);
echo json_encode(array_slice($lista_filtrada,0,2,false));
//var_dump($lista_filtrada);

index.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>autocompletado</title>
</head>
<body>
    <input type="text" list="autocompletado_ctm" placeholder="letras con a,b o c" id="campo_texto">
    <datalist  id="autocompletado_ctm">    
    </datalist>
    <script>
        var DataList= document.getElementById("autocompletado_ctm");
        var Entrada = document.getElementById("campo_texto");
        function total_palabras_visibles(palabra){
            var contar = 0;
            for(var i = 0;i<DataList.options.length;i++){
                if(DataList.options[i].value.startsWith(palabra)){
                    contar++;
                }
                
            }
            return contar;
        }
        Entrada.addEventListener("keyup",function(e){
            //console.log(e);
            
            var buscar = Entrada.value.trim();
            //si es mayor a 1 no ejecutamos el query 
            if(total_palabras_visibles(buscar)>1){
                //Seria util, en caso de tener mILES y MILES de nombres
                //console.log("no ejecutamos");
                return false;
            }
            
            fetch("./words.php?buscar="+ encodeURIComponent(buscar)  ).then(function(stream){
                return stream.json();
            }).then(function(array_php){
                //vaciamos la lista actual
                DataList.innerHTML='';
                for(var i = 0;i<array_php.length;i++){
                    var opt = document.createElement('option');
                    opt.innerText = array_php[i];
                    DataList.append(opt);
                }
            });
        })
        
    </script>
</body>
</html>