Ejemplo de búsqueda en vivo de Ajax en PHP y MYSQL.

Ejemplo de búsqueda en vivo de Ajax en PHP y MYSQL.

Cree una tabla e inserte datos en MySQL.
CREATE TABLE countries (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
countryname VARCHAR(50) NOT NULL
);

INSERT INTO `countries` (`countryname`)
VALUES
('Afghanistan'),
('Åland'),
('Albania'),
('Algeria'),
('American Samoa'),
('Andorra'),
('Guinea'),
('Guinea-Bissau'),
('Guyana'),
('Haiti'),
('Heard Island and McDonald Islands'),
('Honduras'),
('Hong Kong'),
('Hungary'),
('Iceland'),
('India'),
('Indonesia'),
('Iran'),
('Iraq'),
('Ireland'),
('Isle of Man'),
('Israel'),
('Italy'),
('Ivory Coast'),
('Jamaica'),
('Japan')

Cree un archivo connection.php y agregue la línea de código a continuación.
<?php
   $servername="localhost";
   $username="root";
   $password='';
   $dbname = "livedb";
   $conn=mysqli_connect($servername,$username,$password,"$dbname");
   if(!$conn){
      die('Could not Connect MySql Server:' .mysql_error());
    }
?>

Cree un archivo index.php y agregue la línea de código a continuación.
<html lang="en">
<head>
  <title>Live Search Example In PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>     
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  <style>
    .ullist{
            padding-left:190px;
            margin-bottom:20px;
            width:635px;
            margin-top:-15px
    }
  </style>
</head>
<body>
<h3 class="text-success" align="center">Live Search Example In PHP</h3><br>
<div class="container">   
  <div class="panel-group">
    <div class="panel panel-primary">
     <div class="panel-heading">Live Search Example In PHP</div>
        <form class="form-horizontal" method="post">         
            <div class="panel-body">                 
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="title">Search :</label>
                        <div class="col-sm-5">
                          <input type="text" class="form-control" id="live_search"  name="live_search" tabindex="1">
                        </div>
                    </div>                    
                   <div >
                  <ul id="search_result" class="list-group ullist">
                       
                  </ul>
                   </div>
            </div>          
        </form>
      </div>
    </div>
</div> 
</body> 
<head>
<script type="text/javascript">
        $(document).ready(function () {
            $("#live_search").keyup(function () {
                var query = $(this).val();
                if (query != "") {
                    $.ajax({
                        url: 'ajax-live-search.php',
                        method: 'POST',
                        data: {
                            query: query
                        },
                        success: function (data) {
                            $('#search_result').html(data);
                            $('#search_result').css('display', 'block');
                            $("#search_result li").click(function() {
                                 var value = $(this).html();
                                 $('#live_search').val(value);                                
                                 $('#search_result').css('display', 'none');                            
                            });
                        }
                    });
                } else {
                    $('#search_result').css('display', 'none');
                }
            });
        });
    </script>
</head>
</html>

Cree un archivo ajax-live-search.php y agregue la línea de código a continuación.
<?php
  require_once "./connection.php";
 
  if (isset($_POST['query'])) {
      $query = "SELECT * FROM countries WHERE countryname LIKE '{$_POST['query']}%'";
      $result = mysqli_query($connection, $query);
    if (mysqli_num_rows($result) > 0) {
        while ($res = mysqli_fetch_array($result)) {
          
          echo '<li tabindex = "2" class=list-group-item style=cursor:pointer value="$res[countryname]">'.$res["countryname"].'</li>';

      }
    } else {
      echo "<div class="alert alert-danger mt-3 text-center" role="alert">
          Data not found
      </div>
      ";
    }
  }
?>

Si quieres conocer otros artículos parecidos a Ejemplo de búsqueda en vivo de Ajax en PHP y MYSQL. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas