หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

AJAX ค้นหาสด

*** สิ่งนี้ไม่ได้รับการดูแลรักษาอีกต่อไป *** ฉันเริ่มโครงการนี้เมื่อไม่กี่ปีที่ผ่านมา แต่มีการเปลี่ยนแปลงมากมายจนถึงตอนนี้ นอกจากนี้ เนื่องจากการเชื่อมโยงระหว่างเลเยอร์ต่างๆ และเทคโนโลยีเก่าๆ (jQuery!) นี่ไม่ใช่โปรเจ็กต์ที่ปรับขนาดได้ ขอบคุณมากสำหรับการสนับสนุนทั้งหมด แต่น่าเสียดายที่ฉันต้องเก็บถาวรโครงการนี้ :(

AJAX Live Search เป็นปลั๊กอิน jQuery / แบบฟอร์มการค้นหา PHP ที่ค้นหาและแสดงผลลัพธ์เมื่อคุณพิมพ์คล้ายกับฟีเจอร์เติมข้อความอัตโนมัติของ Google

สาธิต

ตรวจสอบมันในการดำเนินการ

รองรับเบราว์เซอร์

ไออี 8+ ✔ โครเมียม ✔ ไฟร์ฟอกซ์ ✔ โอเปร่า ✔ ซาฟารี ✔

ขอขอบคุณ BrowserStack และ JetBrains สำหรับการสนับสนุนโครงการนี้

เริ่มต้นใช้งาน Ajax Live Search

การรับตัวอย่างปัจจุบันใน index.php ให้ใช้งานได้ รวมถึงการสร้างฐานข้อมูลจำลองและตารางไม่ควรใช้เวลานานกว่า 7 นาที แต่จะใช้เวลามากกว่านี้ในกรณีที่คุณต้องการรวมเข้ากับโปรเจ็กต์ที่มีอยู่ เพื่อให้บรรลุผลโดยสมมติว่าคุณมีช่องข้อความนี้:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

  1. คัดลอกโฟลเดอร์รวมทั้ง core , css , font , img , js และ templates ไปยังโปรเจ็กต์ของคุณ

  2. ระบุการกำหนดค่าที่จำเป็น โดยเฉพาะการกำหนดค่าฐานข้อมูลใน core/Config.template.php และเปลี่ยนชื่อไฟล์เป็น Config.php ไฟล์นี้มีการตั้งค่าแบ็คเอนด์ทั้งหมดสำหรับปลั๊กอินที่ได้อธิบายไว้ในตาราง PHP Configs

  3. รวม js/ajaxlivesearch.min.js หรือ js/ajaxlivesearch.js และ css/ajaxlivesearch.min.css หรือ css/ajaxlivesearch.css ในเพจของคุณ

  4. เปลี่ยน URL สำหรับ Access-Control-Allow-Origin header ใน core/AjaxProcessor.php เป็น URL โปรเจ็กต์ของคุณ ปัจจุบันคือ https://ajaxlivesearch.com

  5. ตรวจสอบให้แน่ใจว่า core/Handler.php และ core/Config.php รวมอยู่ในหน้า (PHP) ของคุณและคุณมีบรรทัดเหล่านี้อยู่ที่ด้านบนสุดของไฟล์ (ตรวจสอบ index.php ): 

     use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();

  6. สุดท้าย เชื่อมต่อปลั๊กอินเข้ากับช่องข้อความและส่งตัวเลือกที่จำเป็น (loaded_at & token):

jQuery("#ls_query").ajaxlivesearch({ Load_at: , โทเค็น: getToken() . "'"; ?>, max_input: , }); -

คุณยังสามารถโพสต์พารามิเตอร์เพิ่มเติมไปยังเซิร์ฟเวอร์ได้หากต้องการ เพื่อให้บรรลุเป้าหมายนี้ คุณควรเพิ่มแอตทริบิวต์ data ลงในอินพุตการค้นหา: 

 <input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">

ตัวอย่างเช่น ในกรณีนี้ คุณสามารถเข้าถึงแอตทริบิวต์ data ใน PHP ได้ดังนี้: 

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

ตัวเลือก jQuery

ชื่อ พิมพ์ ที่จำเป็น คำอธิบาย
โหลด_ที่ จำนวนเต็ม ใช่ ใช้เพื่อป้องกันไม่ให้บอทค้นหา
โทเค็น สตริง ใช่ ใช้เพื่อป้องกันการโจมตี CSRF
URL สตริง เลขที่ ค่าเริ่มต้น: ajax/process_livesearch.php
แคช บูลีน เลขที่ นี่หมายถึงการแคชคำขอ Ajax ค่าเริ่มต้น: เท็จ
form_anti_bot สตริง เลขที่ ค่าเริ่มต้น: ajaxlivesearch_guard
สไลด์_ความเร็ว สตริง เลขที่ ค่าเริ่มต้น: รวดเร็ว
type_delay จำนวนเต็ม เลขที่ ค่าเริ่มต้น: 350
max_input จำนวนเต็ม เลขที่ ค่าเริ่มต้น: 20
min_chars_to_search จำนวนเต็ม เลขที่ ความยาวอักขระขั้นต่ำเพื่อเริ่มค้นหา ค่าเริ่มต้น: 0
หน้า_ช่วง อาร์เรย์ เลขที่ ค่าเริ่มต้น: [0, 5, 10]
page_range_default จำนวนเต็ม เลขที่ ค่าเริ่มต้น: 5
form_anti_bot_class สตริง เลขที่ ค่าเริ่มต้น: ls_anti_bot
ส่วนท้าย_คลาส สตริง เลขที่ ค่าเริ่มต้น: ls_result_footer
ถัดไป_หน้า_คลาส สตริง เลขที่ ค่าเริ่มต้น: ls_next_page
Previous_page_class สตริง เลขที่ ค่าเริ่มต้น: ls_previous_page
page_limit สตริง เลขที่ ค่าเริ่มต้น: page_limit
result_wrapper_class สตริง เลขที่ ค่าเริ่มต้น: ls_result_div
ผลลัพธ์_คลาส สตริง เลขที่ ค่าเริ่มต้น: ls_result_main
คอนเทนเนอร์_คลาส สตริง เลขที่ ค่าเริ่มต้น: ls_container
การแบ่งหน้า_คลาส สตริง เลขที่ ค่าเริ่มต้น: การแบ่งหน้า
form_class สตริง เลขที่ ค่าเริ่มต้น: ค้นหา
Load_at_class สตริง เลขที่ ค่าเริ่มต้น: ls_page_loaded_at
โทเค็น_คลาส สตริง เลขที่ ค่าเริ่มต้น: ls_token
current_page_hidden_class สตริง เลขที่ ค่าเริ่มต้น: ls_current_page
current_page_lbl_class สตริง เลขที่ ค่าเริ่มต้น: ls_current_page_lbl
Last_page_lbl_class สตริง เลขที่ ค่าเริ่มต้น: ls_last_page_lbl
Total_page_lbl_class สตริง เลขที่ ค่าเริ่มต้น: ls_last_page_lbl
page_range_class สตริง เลขที่ ค่าเริ่มต้น: ls_items_per_page
การนำทาง_คลาส สตริง เลขที่ ค่าเริ่มต้น: การนำทาง
arrow_คลาส สตริง เลขที่ ค่าเริ่มต้น: ลูกศร

เหตุการณ์ที่กำหนดเอง

ชื่อ
บนผลลัพธ์คลิก
บนResultEnter
บนอาแจ็กซ์เสร็จสมบูรณ์

ตัวอย่าง: 

 jQuery(".mySearch").ajaxlivesearch({
    loaded_at: <?php echo time(); ?>,
    token: <?php echo "'" . $handler->getToken() . "'"; ?>,
    max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
    onResultClick: function(e, data) {
        // get the index 1 (second column) value
        var selectedOne = jQuery(data.selected).find('td').eq('1').text();

        // set the input value
        jQuery('#ls_query').val(selectedOne);

        // hide the result
        jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
    },
    onResultEnter: function(e, data) {
        // do whatever you want
        // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
    },
    onAjaxComplete: function(e, data) {

    }
});

ทริกเกอร์แบบกำหนดเอง

ชื่อ
ajaxlivesearch:hide_result
ajaxlivesearch:ค้นหา

การกำหนดค่า PHP

ชื่อ พิมพ์ ที่จำเป็น คำอธิบาย
แหล่งข้อมูล อาร์เรย์ ใช่ แหล่งข้อมูลสำหรับช่องข้อความค้นหาแต่ละช่อง คีย์จะอ้างถึงรหัส HTML ของฟิลด์ ปัจจุบันรองรับ MySQL และ mongoDB (ซึ่งอยู่ในรุ่นเบต้า)

การกำหนดค่าแหล่งข้อมูล MySQL:
ชื่อ พิมพ์ ที่จำเป็น คำอธิบาย
เจ้าภาพ สตริง ใช่ โฮสต์ฐานข้อมูล MySQL โดยปกติจะเป็น 'localhost'
ฐานข้อมูล สตริง ใช่ ชื่อฐานข้อมูล MySQL
ชื่อผู้ใช้ สตริง ใช่ ชื่อผู้ใช้ฐานข้อมูล MySQL
ผ่าน สตริง ใช่ รหัสผ่านชื่อผู้ใช้ฐานข้อมูล MySQL
โต๊ะ สตริง ใช่ ตารางฐานข้อมูล MySQL ที่การค้นหาแบบสดค้นหา
ค้นหาคอลัมน์ อาร์เรย์ ใช่ คอลัมน์การค้นหาที่การค้นหาแบบสดใช้ค้นหา อาจเป็นคอลัมน์เดียวหรือหลายคอลัมน์ก็ได้ เช่น array('column_name_1', 'column_name_2')
สั่งซื้อโดย สตริง เลขที่ คอลัมน์ที่เรียงลำดับผลลัพธ์ตามนั้น
คำสั่งทิศทาง สตริง เลขที่ ทิศทางการสั่งซื้อ: 'ASC' หรือ 'DESC' สำหรับ 'orderBy' ค่าเริ่มต้น: ASC
กรองผลลัพธ์ อาร์เรย์ เลขที่ คอลัมน์ที่ต้องอยู่ในผลลัพธ์ หากว่างเปล่าคอลัมน์ทั้งหมดจะถูกส่งกลับ
ตัวดำเนินการเปรียบเทียบ สตริง ใช่ ตัวดำเนินการเปรียบเทียบคำค้นหา ค่าที่เป็นไปได้สำหรับตัวดำเนินการเปรียบเทียบคือ: 'LIKE' และ '='
ค้นหารูปแบบ สตริง ใช่ ใช้เพื่อระบุวิธีการค้นหาคำค้นหา ค่าที่เป็นไปได้คือ: `q`, `*q`, `q*`, `*q*`
caseSensitive สตริง ใช่ ค้นหาความละเอียดอ่อนของตัวพิมพ์ของคำค้นหา
ผลลัพธ์สูงสุด จำนวนเต็ม เลขที่ ใช้เพื่อจำกัดจำนวนผลลัพธ์สูงสุด
displayHeader อาร์เรย์ เลขที่ ใช้เพื่อแสดงหรือซ่อนส่วนหัวในผลลัพธ์ หากตั้งค่า 'ใช้งาน' เป็นส่วนหัวจริงจะปรากฏขึ้น นอกจากนี้ยังสามารถจับคู่คอลัมน์กับชื่อที่แตกต่างกันได้
พิมพ์ สตริง ใช่ ประเภทของแหล่งข้อมูล ค่าที่เป็นไปได้ในปัจจุบันคือ: 'mysql' หรือ 'mongo'
แอนตี้บอท สตริง ใช่ สิ่งนี้ใช้เป็นเทคนิคความปลอดภัยเพื่อป้องกันการส่งแบบฟอร์มจากบอทที่ไม่ได้ใช้ JavaScript ในเทคนิคนี้ ช่องที่ซ่อนไว้จะถูกเติมโดยใช้ jQuery ด้วยค่านี้ สามารถมีค่าใดๆ ก็ได้ แต่จะต้องเหมือนกับตัวเลือก `form_anti_bot` ที่ส่งไปยังปลั๊กอิน jQuery โดยค่าเริ่มต้นจะถูกตั้งค่าเป็น `ajaxlivesearch_guard`
ค้นหา StartTimeOffset จำนวนเต็ม ใช่ สิ่งนี้ใช้สำหรับเทคนิคความปลอดภัยอื่นกับบอท บอทบางตัวจะส่งแบบฟอร์มทันทีเมื่อโหลดเพจเสร็จแล้ว อย่างไรก็ตาม สำหรับมนุษย์ต้องใช้เวลานานกว่าในการกรอกข้อมูลในฟิลด์ ตามค่าเริ่มต้นพารามิเตอร์นี้ตั้งไว้ที่ 3 วินาที ไม่แนะนำให้กำหนดมากกว่า 3 วินาที
ความยาวอินพุตสูงสุด จำนวนเต็ม ใช่ นี่เป็นการระบุความยาวสูงสุดของอักขระในช่องค้นหา
แม่แบบ สตริง ใช่ นี่เป็นการระบุชื่อเทมเพลตที่อยู่ในโฟลเดอร์เทมเพลต

คำถามที่พบบ่อย

  • ความเสี่ยงในการปิดการใช้งาน anti_bot และโทเค็นคืออะไร?

    form_anti_bot เป็นคุณลักษณะด้านความปลอดภัยที่ดีที่ควรมี แต่ควรจะลบออกได้ เพื่อให้บรรลุเป้าหมายนี้ คุณจะต้องเปลี่ยน validateRequest() ใน core/AjaxProcessor.php และลบ $_POST['ls_anti_bot'] รวมถึงเปลี่ยน verifySessionValue($sessionParameter, $sessionValue) ใน core/Handler.php ในทางตรงกันข้าม การลบ token จะทำให้ใครก็ตามสามารถสร้างแบบฟอร์มและใช้เซิร์ฟเวอร์ของคุณเป็นแหล่งข้อมูลได้ จึงไม่แนะนำให้ทำเช่นนั้น ปัจจุบัน ทุกครั้งที่โหลดเพจ / แบบฟอร์มการค้นหา โทเค็นใหม่จะถูกสร้างขึ้นโดยการเรียก getToken() ในหน้าแบบฟอร์ม ( index.php ในตัวอย่างปัจจุบัน) จากนั้นโทเค็นและ anti_bot จะถูกตรวจสอบโดยใช้ verifySessionValue($sessionParameter, $sessionValue) เมื่อค้นหา / ส่งคำขอใหม่ไปยังเซิร์ฟเวอร์ หากสิ่งนี้ดูเกินความจำเป็นสำหรับคุณ ใน getToken() ส่งคืนโทเค็นเดียวกันสำหรับเซสชันที่มีอยู่

  • สามารถซ่อนคอลัมน์ในผลลัพธ์ได้อย่างไร

    ซึ่งสามารถทำได้ในเทมเพลตของคุณ ตัวอย่างสามารถพบได้ใน templates/hiddenColumn.php

ใบอนุญาต

ใบอนุญาตเอ็มไอที

ซื้อกาแฟให้ฉันครึ่งหนึ่งถ้าคุณต้องการ!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด