كيفاش تدير auto suggestion ب ajax

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تدير auto suggestion ب ajax فل auto suggestion هو ملي كتدير recherche فشي موقع وكيطلعولك les suggestions ف input لي هي حقل البحث فحنا غادي نشوفوها كيفاش نجبدو les données ب ajax و mysql ونعرضوها تحت le champ ديال البحث.

نظرة سريعة بالفيديو


1- إضافة قاعدة البيانات


فأول حاجة غادي تزيد قاعدة بيانات جديدة سميها ajax  منبعد زيد فيها table سميها clients الكود باش تزيد la table هو :

                                    
                                        CREATE TABLE `clients` (
  `id` int(11) NOT NULL,
  `nom` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
                                    
                                

2- الملف constants.php


منبعد زيد dossier جديد سميه auto_sugget او لي بغيتي هدا  هو dossier ديال ل projet ديالنا زيدو ف localhost منبعد زيد ملف جديد سميه constants.php غادي يكونو فيه des variables de connexion لي غادي يمكنوا من الإتصال بقاعدة البيانات الكود ديال الملف هو :

                                    
                                        <?php
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_DATABASE','ajax');
                                    
                                

3- الملف index.php


 منبعد كنزيد ملف جديد كنسميه index.php  ف index.php غادي نزيد structure ديالي فعندي روابط لمفات css و js وعندي input لي كتاخد id search ولي هي حقل البحث وعندي  div عطيتها id search-list فيها غادي يتعرضوا les résultats  ديال البحث  الكود ديال الملف هو :

                                      
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Ajax Auto Suggestion</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Recherche</h2>
            <div class="search-box">
                <input type="text" name="search" id="search" placeholder="Mot clé" onkeyup="get_data()">
            </div>
            <div id="search-list">
                
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
                                      
                                    

4- الملف script.js


منبعد كنزيد ملف جديد كنسميه script.js فيه ل fonction get_data لي كتدير la connexion مع ل fichier search.php لي غادي نزيدوه من بعد ولي كترسلو لقيمة ديال الحقل ديال البحث يعني داكشي لي دخل المستخدم منبعد مكنسترجعوها باستعمال ل id ديال le champ ومنبعد كنتحقق كانت response كتساوي ل vide كنعرض ميساج بلي متلقى والو كانت العكس كنعرض response ف div مول id search-list الكود ديال الملف هو : 

                                        
                                            function get_data(){
    var xhr;
    var value = document.getElementById("search").value;
    var length = value.length;
    if(length==0)
    {
        document.getElementById('search-list').innerHTML = "";
    }
    else
    {
        if(window.ActiveXObject)
        {
            try{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e)
            {
                alert('error');
            }
            
        }
        else if(window.XMLHttpRequest)
        {
            try{
                xhr = new XMLHttpRequest();
            }
            catch(e)
            {
                alert('error');
            }
        }
        xhr.onreadystatechange = function(){
            if(this.readyState==4 && this.status==200)
            {
                if(this.responseText !== ''){
                    console.log(this.responseText);
                    var html = '<ul>';
                    html += '<li class="results">'+ this.responseText + '</li><br>';
                    html += '</ul>';
                    $('#search-list').html(html);
                }else {
                    console.log(this.responseText);
                    var noResult = '<ul>';
                    noResult += '<li class="no-result"> Aucun Resultat </li>';
                    noResult += '</ul>';
                    $('#search-list').html(noResult);
                }
            }
        }
        xhr.open("GET","search.php?val="+value,true);
        xhr.send();
    }
}
                                        
                                    

5- الملف search.php


منبعد كنزيد ملف جديد كنسميه search.php فيه كندير ل include لل fichier constants.php وبديك les constantes كندير la connexion مع la base منبعد كنستقبل la valeur لي جاتنا من script.js وكندير requête ديال recherche وكنعرض résultat  الكود ديال الملف هو : 

                                        
                                            <?php 
    include_once('constants.php');
	$search = $_GET['val'];
    $search1 = $search.'%';
    $con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_DATABASE);
	$query = "select * from clients where nom like '$search1' OR prenom like '$search1'";
	$query_executed = mysqli_query($con,$query);
	if(mysqli_num_rows($query_executed) > 0)
	{
		while($row = mysqli_fetch_assoc($query_executed))
		{
			echo $row['nom'].' '.$row['email'].'<br>';
		}
	}
 ?>
                                        
                                    

كلمات مفاتيح :