Demostración Jquery UI Selectable usando Ajax, PHP y bases de datos MySQL

Introducción

En este artículo vamos a explicar como crear un input de tipo text desde el cual aparezcan sugerencias y se pueda autocompletar su valor. Este post viene a complementar el anterior sobre cómo crear un cuadro de búsqueda al estilo de google.

El código html

Comenzaremos ingresando estas tres etiquetas html con sus respectivos id y clases

        <p class="hidden-tips-text"></p>
        <input type="text" id="busqueda" />
        <div id="resultado"></div>
      

En la etiqueta head

Hoja de estilo css

<style>
  p.hidden-tips-text {
  display: none;
  }
  li:hover {
    background-color: grey;
    width: 20%;
    color: white;
  }
  input{
    width: 25%;
    height: 18px;
    color: green;
  }
  </style>
	

Jquery, Jquery UI y Script

<script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        var consulta;
        //hacemos focus al campo de búsqueda
        $("#busqueda").focus();
                                                                                                     
        //comprobamos si se pulsa una tecla
        $("#busqueda").keyup(function(e){
                                      
              //obtenemos el texto introducido en el campo de búsqueda
              consulta = $("#busqueda").val();
              //hace la búsqueda                                                                
              $.ajax({
                    type: "POST",
                    url: "buscar.php",
                    data: "b="+consulta,
                    dataType: "html",
                    beforeSend: function(){
                    //imagen de carga
                    $("#resultado").html("<img src='cargando.gif' />");
                    },
                    error: function(){
                    alert("error petición ajax");
                    },
                    success: function(data){                                                    
                    $("#resultado").empty();
                    $("#resultado").append(data);
                    //seleccionamos de la lista
                    var lista = $('div#resultado');
                    lista.bind("mousedown", function (e) {
                    e.metaKey = false;
                    }).selectable({
                    stop: function () {
                    var result = $("input#busqueda");
                    var fakeText = $('p.hidden-tips-text').empty();
                    $(".ui-selected", this).each(function () {
                    var index = $(this).text();
                    fakeText.append((index) + "");
                    });
                    result.val(fakeText.text());
        }
    });          
                  }
              });       
                    
        });                                                    
});
  </script>
  

El archivo buscar.php

En este archivo conectamos con mysql y es el encargado de realizar la búsqueda del lado del servidor

  <?php    
      $buscar = $_POST['b'];       
      if(!empty($buscar)) {
            buscar($buscar);
      }
        
      function buscar($b) {
            $con = mysql_connect('localhost','root', '');
            mysql_select_db('paises', $con);
        
            $sql = mysql_query("SELECT * FROM tabla WHERE pais LIKE '%$b%' 
                 OR id LIKE '%$b%' LIMIT 5", $con);
              
            $contar = @mysql_num_rows($sql);
              
            if($contar == 0){
                  echo "No se han encontrado resultados para '<b>".$b."</b>'.";
            }else{
              while($row=mysql_fetch_array($sql)){
                $id = $row['id'];
                $pais = $row['pais'];               
              echo "<li class='common-list'>".$id." - ".$pais."</li>";
            }
        }
  }
        
?>
  

Demostración

Queda disponible esta demostración con un listado de países y sus prefijos telefónicos para llamadas internacionales

Anuncios / Ads
Anuncios / Ads

Sobre programación web

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript

Fotografía

• Michelles Jaque
• Beatriz Cabrera Zapata

Poesías

• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales

Últimas Publicaciones

• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Proyecto Intranet: Ordenes de servicio y ventas
• Demostración Jquery UI Selectable usando php y bases de datos mysql

Anuncios / Ads

Newsletter



Gracias. Te mantendremos informado

Website Template por IdeasChile © Optimizado para Chrome - Firefox - Opera