كيف أبحث داخل قاعدة البيانات باستخدام PHP وJquery؟

Blackhacker · 4 يونيو 2016

أبحث عن شيفرة برمجية للبحث داخل قاعدة البيانات باستخدام لغات PHP وJquery، فكيف أفعل ذلك؟

هشام رزق الله · 4 يونيو 2016

سأشرح لك طريقة سهلة باستخدام مكتبة تدعى بـ typeahead، قم بتحميلها وأضفها إلى ملف المشروع.
حسنا، لنفترض أنك قد قمت بإنشاء قاعدة بيانات بهذه الطريقة:

CREATE TABLE 'users_name'
(
    user_id INT(20) PRIMARY KEY,
    fname TEXT
);

ومن ثم أنشئ صفحة مشابه لهذه (مثال بسيط على صفحة ويب):

<html>
  <head>
    <title>Search Box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="typeahead.min.js"></script>
  </head>
    <body>
     <input type="text" name="typeahead">
    </body>
    </html>

الصفحة بسيطة تحتوي فقط على مربع لادخال الكلمة للبحث.

وسنستدعي في مثالنا PHP عن طريق استخدام get كما في المثال التالي:

  <script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'search.php?key=%QUERY',
        limit : 10
    });
});
    </script>

حيث ستكون الشيفرة البرمجية الخاصة بالبحث كالتالي (ملف search.php):

<?php
    $key=$_GET['key'];
    $array = array();
    $con=mysql_connect("localhost","root","");
    $db=mysql_select_db("database name",$con);
    $query=mysql_query("select * from table_name where <coloumn_name> LIKE '%{$key}%'");
    while($row=mysql_fetch_assoc($query))
    {
      $array[] = $row['title'];
    }
    echo json_encode($array);
?>

قم باستبدال معلومات قاعدة البيانات حسب المطلوب.

المصدر

تم التعديل في 4 يونيو 2016 بواسطة هشام رزق الله

E.Nourddine · 5 يونيو 2016

في المثال التالي، أقدم لك الطريقة المتبعة من قبل المبرمجين لعرض النتائج المبحوث عنها في قاعدة بيانات mysql عن طريق Jquery:

معلومات حول قاعدة البيانات:

database name => phpgang
table name => live_search
column names => id, name, email

إنشاء قاعدة البيانات و الجدول، وملءه ببعض البيانات:

create database `phpgang`;
use `phpgang`;
 
CREATE TABLE `live_search` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  `date` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
INSERT INTO `live_search` VALUES (1, 'Huzoor Bux', 'huzoorbux@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (2, 'Sameer Khan', 's_khan@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (3, 'Ravi Khana', 'r_khana@phpgang.com', '2013-08-29 11:05:31');
INSERT INTO `live_search` VALUES (4, 'Neelam Ara', 'neelam@phpgang.com', '2013-08-29 11:05:31');

ملف db.php للاتصال بقاعدة البيانات:

<?php
    $connection = mysqli_connect('localhost','phpgang_usr','******','phpgang');
    if (mysqli_connect_errno())
    {
         echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
?>

ملفindex.php يتضمن حقل البحث:

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex: <b><i>huzoor bux, neelam, ravi or sameer</i></b><br /> 
<div id="result"></div>
</div>

Javascript والتي ستتيح البحث عند كل حرف يكتب في الحقل المخصص للبحث:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
    $.ajax({
    type: "POST",
    url: "result.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});
 
jQuery("#result").on("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find(\'.name\').html();
    var decoded = $("<div/>").html($name).text();
    $(\'#searchid\').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$(\'#searchid\').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>

ملف تنسيقcss لاضافة بعض التأثيرات قصد جمالية الصفحة:

<style type="text/css">
    .content{
        width:900px;
        margin:0 auto;
    }
    #searchid
    {
        width:500px;
        border:solid 1px #000;
        padding:10px;
        font-size:14px;
    }
    #result
    {
        position:absolute;
        width:500px;
        padding:10px;
        display:none;
        margin-top:-1px;
        border-top:0px;
        overflow:hidden;
        border:1px #CCC solid;
        background-color: white;
    }
    .show
    {
        padding:10px; 
        border-bottom:1px #999 dashed;
        font-size:15px; 
        height:50px;
    }
    .show:hover
    {
        background:#4c66a4;
        color:#FFF;
        cursor:pointer;
    }
</style>

ملف result.php المسؤول عن ارسال جمل الاستعلام للبحث عن الكلمة المبحوث عنها:

<?php
include('db.php');
if($_POST)
{
    $q = mysqli_real_escape_string($connection,$_POST['search']);
    $strSQL_Result = mysqli_query($connection,"select id,name,email from live_search where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
    while($row=mysqli_fetch_array($strSQL_Result))
    {
        $username   = $row['name'];
        $email      = $row['email'];
        $b_username = '<strong>'.$q.'</strong>';
        $b_email    = '<strong>'.$q.'</strong>';
        $final_username = str_ireplace($q, $b_username, $username);
        $final_email = str_ireplace($q, $b_email, $email);
        ?>
            <div class="show" align="left">
                <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/27301_312848892150607_553904419_n.jpg" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
            </div>
        <?php
    }
}
?>

يمكنك تجريب المثال من خلال Demo.

تم التعديل في 5 يونيو 2016 بواسطة E.Nourddine

كيف أبحث داخل قاعدة البيانات باستخدام PHP وJquery؟

السؤال

Blackhacker

2 أجوبة على هذا السؤال

Recommended Posts

هشام رزق الله

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية