الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery
مرحبًا بالجميع ، قابلني مرة أخرى مع portgastea ، رجل وسيم من Sunda .. هيهي… هذا البرنامج التعليمي سنفعله صنع الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery.
حسنًا ، تفضل… أولاً نقوم بإنشاء ملف connection.php على النحو التالي
<?بي أتش بي
حدد("_HOST_NAME", "مضيف محلي");
حدد("_DATABASE_USER_NAME", 'جذر');
حدد("_DATABASE_PASSWORD", "12345");
حدد("_DATABASE_NAME", 'درس تعليمي');
$dbConnection = جديد mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
إذا ($dbConnection->خطأ في الاتصال) {
خطأ الزناد('فشل الاتصال: " . $dbConnection->خطأ في الاتصال, E_USER_ERROR);
}
?>
بعد ذلك نقوم بإنشاء ملف index.php على النحو التالي
- <!DOCTYPE html>
- <html lang="en">
- <رئيس>
- <meta charset="utf-8">
- <عنوان>الإكمال التلقائي بحث dengan PHP, MySQLi, Ajax و jQuery </عنوان>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
-
- <!-- الأنماط ->
- <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
- <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
-
- <style type="text/css">
- الجسم {
- أعلى الحشو: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
- }
- .الويب{
- خط العائلة:تاهوما;
- بحجم:12مقصف;
- أعلى:10%;
- الحدود:1بكسل صلب #CDCDCD;
- نصف قطر الحد:10مقصف;
- حشوة:10مقصف;
- عرض:38%;
- حافة:تلقاءي;
- }
- #search_keyword_id
- {
- عرض:300مقصف;
- الحدود:صلب 1px #CDCD;
- حشوة:10مقصف;
- حجم الخط:14مقصف;
- }
- #نتيجة
- {
- وضع:مطلق;
- عرض:320مقصف;
- عرض:لا شيء;
- الهامش العلوي:-1مقصف;
- أعلى الحد:0مقصف;
- تجاوز:مخفي;
- الحدود:1بكسل #CDCDCD صلبة;
- لون الخلفية: أبيض;
- }
- .تبين
- {
- خط العائلة:تاهوما;
- حشوة:10مقصف;
- الحد السفلي:1مقصف #CDCDCD متقطع;
- حجم الخط:15مقصف;
- }
- .تبين:يحوم
- {
- خلفية:#364956;
- اللون:#FFF;
- المؤشر:المؤشر;
- }
- </أسلوب>
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
-
- <!-- HTML5 shim, لدعم IE6-8 لعناصر HTML5 ->
- <!--[إذا كان lt IE 9]>
- <script src="../assets/js/html5shiv.js"></النصي>
- <![إنهاء إذا]-->
-
- <!-- الرموز المفضلة واللمس ->
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
- <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
- <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
- <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
- <link rel="shortcut icon" href="assets/ico/favicon.png">
- </رئيس>
-
- <الجسم>
- <div class="navbar navbar-inverse navbar-fixed-top">
- <div class="navbar-inner">
- <div class="container">
- <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
- <span class="icon-bar"></امتداد>
- <span class="icon-bar"></امتداد>
- <span class="icon-bar"></امتداد>
- </زر>
- <a class="brand" href="http://andeznet.com">AndezNet</أ>
- <div class="nav-collapse collapse">
- <ul class="nav">
- <في ال><a href="active">الصفحة الرئيسية</أ></في ال>
-
- </ال>
- </شعبة><!--/.nav-collapse ->
- </شعبة>
- </شعبة>
- </شعبة>
-
-
- <div class="container">
- <فئة div = "ويب">
- <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." />
- <div id="result"></شعبة>
- </شعبة>
-
- <div class="row-fluid">
- <div class="span12">
- <div class="row-fluid">
- <div class="alert alert-info">
- <a name="contact"></أ>
- <h2>www.andeznet.com</h2>
- <p class="text-info">مستودع التكنولوجيا & معلومات</ص>
- <ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?></ص>
- </شعبة><!--/امتداد-->
- </شعبة><!--/صف-->
- </شعبة><!--/امتداد-->
- </شعبة><!--/صف-->
-
- </شعبة>
- <script src="assets/js/jquery-1.8.3.min.js"></النصي>
- <script type="text/javascript">
- $(وظيفة(){
- $(".cari_keyword").مفتاح(وظيفة()
- {
- var cari_keyword_value = $(هذه).فال();
- var dataString = 'search_keyword =' + search_keyword_value;
- إذا(cari_keyword_value!= ")
- {
- $.أياكس({
- نوع: "POST",
- عنوان url: "cari.php",
- البيانات: سلسلة البيانات,
- مخبأ: خاطئة,
- نجاح: وظيفة(لغة البرمجة)
- {
- $("#result").لغة البرمجة(لغة البرمجة).تبين();
- }
- });
- }
- عودة كاذبة;
- });
-
- $("#result").حي("click",وظيفة(ه){
- تم النقر على var $ = $(ه. الهدف);
- var $ name = $ clicked.find(". اسم الطالب").لغة البرمجة();
- فار فك = $("<div />").لغة البرمجة($اسم).نص();
- $("#cari_keyword_id").فال(فك);
- });
-
- $(وثيقة).حي("click", وظيفة(ه) {
- تم النقر على var $ = $(ه. الهدف);
- إذا (! $تم النقر عليه("cari_keyword")){
- $("#result").تتآكل();
- }
- });
-
- $("#cari_keyword_id").انقر(وظيفة(){
- $("#result").اختفي();
- });
- });
- </النصي>
-
-
- <script src="assets/js/bootstrap.min.js"></النصي>
-
- </الجسم>
- </لغة البرمجة>
الآن ، أخيرًا ، دعنا ننشئ ملف search.php وأدخل البرنامج النصي أدناه
<?بي أتش بي
تضمن("connect.php");
إذا(ايسيت($_بريد['كلمة البحث']))
{
$كلمة البحث = $dbConnection->real_escape_string($_بريد['كلمة البحث']);
$sql السيسوة="SELECT id_daftar,s_nama من المعلم حيث s_nama مثل٪$كلمة البحث%"";
$رسيسوا=$dbConnection->استفسار($sql السيسوة);
إذا($رسيسوا === خاطئة) {
خطأ الزناد('خطأ: " . $dbConnection->خطأ, E_USER_ERROR);
}آخر{
$تم إرجاع الصفوف = $رسيسوا->num_rows;
}
$bold_cari_keyword = "<قوي>".$كلمة البحث."</قوي>";
إذا($تم إرجاع الصفوف > 0){
في حين($صف الطلاب = $رسيسوا->fetch_assoc())
{
صدى صوت "<div class="show" align="left"><span class="nama_siswa">".str_ireplace($كلمة البحث,$bold_cari_keyword,$صف الطلاب['s_name'])."</امتداد></شعبة>";
}
}آخر{
صدى صوت "<div class="show" align="left">لا توجد سجلات مطابقة.</شعبة>";
}
}
?>
سهل أليس كذلك?? الكالينجيون إذا نجحت ستبدو مثل الصورة أدناه
لذلك هذا البرنامج التعليمي ، نأمل أن يكون من المفيد تنزيل الكود المصدري الكامل ، يمكنك تنزيله هنا
اشكرك ترميز سعيد & برمجة
terima kasih gan saya sudah download semua nya, semoga berkah ya gan untuk belajar terimakasih
Amin