اذهب إلى المحتوى
  • 0

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

Blackhacker

السؤال

Recommended Posts

  • 0

سأشرح لك طريقة سهلة باستخدام مكتبة تدعى بـ 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);
?>

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

المصدر

تم التعديل في بواسطة هشام رزق الله
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

 في المثال التالي، أقدم لك الطريقة المتبعة من قبل المبرمجين لعرض النتائج المبحوث عنها في قاعدة بيانات 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.

تم التعديل في بواسطة E.Nourddine
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...