unduh ajax live search - unduh kode sumber ajax live search

ajax live search

Kode sumber lainnya

version - Version 3.1

Unduh

Pencarian Langsung AJAX

*** Ini sudah tidak dipelihara lagi *** Saya memulai proyek ini beberapa tahun yang lalu, namun sejauh ini sudah banyak yang berubah. Selain itu, karena penggabungan antara lapisan yang berbeda, dan juga teknologi lama (jQuery!), ini bukanlah proyek yang dapat diskalakan. Terima kasih banyak atas semua dukungannya tetapi sayangnya saya harus mengarsipkan proyek ini :(

AJAX Live Search adalah plugin jQuery / formulir pencarian PHP yang mencari dan menampilkan hasil saat Anda mengetik mirip dengan fitur Google Autocomplete.

Demo

Lihat aksinya.

Dukungan Peramban


Yaitu 8+ ✔	krom ✔	Firefox ✔	Opera ✔	Safari ✔

Terima kasih kepada BrowserStack dan JetBrains yang telah mendukung proyek ini.

Memulai Pencarian Langsung Ajax

Membuat contoh saat ini di index.php berfungsi termasuk membuat database tiruan dan tabel tidak akan memakan waktu lebih dari 7 menit. Namun hal ini akan memakan waktu lebih lama jika Anda perlu mengintegrasikannya ke dalam proyek yang sudah ada. Untuk mencapainya dengan asumsi Anda memiliki bidang teks ini:

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

Salin folder termasuk core , css , font , img , js dan templates ke proyek Anda.
Tentukan konfigurasi yang diperlukan khususnya konfigurasi database di core/Config.template.php dan ganti nama file menjadi Config.php . File ini berisi semua pengaturan back-end untuk plugin yang telah dijelaskan di tabel Konfigurasi PHP.
Sertakan js/ajaxlivesearch.min.js atau js/ajaxlivesearch.js dan css/ajaxlivesearch.min.css atau css/ajaxlivesearch.css di halaman Anda.
Ubah URL untuk Access-Control-Allow-Origin header di core/AjaxProcessor.php ke URL proyek Anda. Saat ini https://ajaxlivesearch.com .

Pastikan core/Handler.php dan core/Config.php disertakan dalam halaman (PHP) Anda dan Anda memiliki baris ini di bagian paling atas file (Periksa index.php ):

 use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

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

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

Terakhir, kaitkan plugin ke kolom teks dan teruskan opsi yang diperlukan (loaded_at & token):

jQuery("#ls_query").ajaxlivesearch({ dimuat_at: , token: getToken() . "'"; ?>, max_input: , }); ```

Anda juga dapat memposting parameter tambahan ke server jika diperlukan. Untuk mencapai hal ini, Anda harus menambahkan atribut data ke input pencarian:

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

Misalnya dalam hal ini Anda dapat mengakses atribut data di PHP seperti ini:

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

Opsi jQuery

Nama	Jenis	Diperlukan	Keterangan
dimuat_at	Bilangan bulat	Ya	Ini digunakan untuk mencegah bot melakukan pencarian.
token	Rangkaian	Ya	Ini digunakan untuk mencegah serangan CSRF.
url	Rangkaian	TIDAK	Bawaan: ajax/process_livesearch.php.
cache	Boolean	TIDAK	Ini mengacu pada cache permintaan Ajax. Bawaan: salah
form_anti_bot	Rangkaian	TIDAK	Bawaan: ajaxlivesearch_guard
kecepatan_slide	Rangkaian	TIDAK	Bawaan: cepat
ketik_penundaan	Bilangan bulat	TIDAK	Bawaan: 350
masukan_maks	Bilangan bulat	TIDAK	Bawaan: 20
min_chars_to_search	Bilangan bulat	TIDAK	Panjang karakter minimum untuk mulai mencari. Bawaan: 0
rentang_halaman	Himpunan	TIDAK	Bawaan: [0, 5, 10]
halaman_rentang_default	Bilangan bulat	TIDAK	Bawaan: 5
form_anti_bot_class	Rangkaian	TIDAK	Bawaan: ls_anti_bot
footer_kelas	Rangkaian	TIDAK	Bawaan: ls_result_footer
kelas_halaman_berikutnya	Rangkaian	TIDAK	Bawaan: ls_next_page
kelas_halaman_sebelumnya	Rangkaian	TIDAK	Bawaan: ls_previous_page
batas_halaman	Rangkaian	TIDAK	Bawaan: batas_halaman
hasil_wrapper_class	Rangkaian	TIDAK	Bawaan: ls_result_div
hasil_kelas	Rangkaian	TIDAK	Bawaan: ls_result_main
kelas_kontainer	Rangkaian	TIDAK	Bawaan: ls_container
pagination_class	Rangkaian	TIDAK	Default: penomoran halaman
bentuk_kelas	Rangkaian	TIDAK	Bawaan: pencarian
dimuat_di_kelas	Rangkaian	TIDAK	Bawaan: ls_page_loaded_at
token_kelas	Rangkaian	TIDAK	Bawaan: ls_token
kelas_halaman_tersembunyi_saat ini	Rangkaian	TIDAK	Bawaan: ls_current_page
kelas_halaman_lbl_saat ini	Rangkaian	TIDAK	Bawaan: ls_current_page_lbl
kelas_halaman_terakhir	Rangkaian	TIDAK	Bawaan: ls_last_page_lbl
total_halaman_lbl_kelas	Rangkaian	TIDAK	Bawaan: ls_last_page_lbl
halaman_rentang_kelas	Rangkaian	TIDAK	Bawaan: ls_items_per_page
kelas_navigasi	Rangkaian	TIDAK	Bawaan: navigasi
panah_kelas	Rangkaian	TIDAK	Bawaan: panah

Acara Khusus

Nama
padaHasilKlik
padaHasilEnter
diAjaxComplete

Contoh:

 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) {

    }
});

Pemicu Khusus

Nama
ajaxlivesearch: sembunyikan_hasil
ajaxlivesearch:pencarian

Konfigurasi PHP

Nama

Jenis

Diperlukan

Keterangan

Sumber data

Himpunan

Ya

Sumber data untuk setiap bidang teks pencarian. Kunci mengacu pada id HTML bidang. Saat ini MySQL dan mongoDB (ini masih dalam versi beta) didukung.

Konfigurasi sumber data MySQL:

Nama	Jenis	Diperlukan	Keterangan
tuan rumah	Rangkaian	Ya	Tuan rumah basis data MySQL. Biasanya 'localhost'.
basis data	Rangkaian	Ya	Nama basis data MySQL.
nama belakang	Rangkaian	Ya	Nama pengguna basis data MySQL.
lulus	Rangkaian	Ya	Kata sandi nama pengguna basis data MySQL.
meja	Rangkaian	Ya	Tabel database MySQL tempat pencarian pencarian langsung.
kolom pencarian	Himpunan	Ya	Kolom pencarian yang dicari oleh pencarian langsung. Bisa satu atau banyak. misalnya array('nama_kolom_1', 'nama_kolom_2')
dipesan Oleh	Rangkaian	TIDAK	Kolom yang hasilnya diurutkan berdasarkan di dalamnya.
arah pesanan	Rangkaian	TIDAK	Arah pemesanan: 'ASC' atau 'DESC' untuk 'orderBy'. Nilai bawaan: ASC
filterHasil	Himpunan	TIDAK	Kolom yang perlu ada di hasil. Jika kosong semua kolom akan dikembalikan.
perbandinganOperator	Rangkaian	Ya	Operator perbandingan kueri penelusuran. Nilai yang mungkin untuk operator perbandingan adalah: 'LIKE' dan '='.
pola pencarian	Rangkaian	Ya	Ini digunakan untuk menentukan bagaimana kueri dicari. nilai yang mungkin adalah: `q`, `q`, `q`, `q`.
caseSensitif	Rangkaian	Ya	Sensitivitas huruf besar/kecil kueri penelusuran
hasil maksimal	Bilangan bulat	TIDAK	Ini digunakan untuk membatasi jumlah hasil maksimal.
tampilanHeader	Himpunan	TIDAK	Ini digunakan untuk menampilkan atau menyembunyikan header pada hasil. Jika 'aktif' disetel ke header sebenarnya akan ditampilkan. Selain itu, dimungkinkan untuk memetakan kolom ke judul yang berbeda.
jenis	Rangkaian	Ya	Jenis sumber data. Nilai yang mungkin saat ini adalah: 'mysql' atau 'mongo'.

antiBot

Rangkaian

Ya

Ini digunakan sebagai teknik keamanan untuk mencegah pengiriman formulir dari bot yang tidak menggunakan JavaScript. Dalam teknik ini, bidang tersembunyi diisi menggunakan jQuery dengan nilai ini. Nilainya bisa berapa saja, tapi HARUS sama dengan opsi `form_anti_bot` yang diteruskan ke plugin jQuery. Secara default disetel ke `ajaxlivesearch_guard`.

pencarianStartTimeOffset

Bilangan bulat

Ya

Ini digunakan untuk teknik keamanan lain terhadap bot. Beberapa bot langsung mengirimkan formulir setelah halaman selesai dimuat. Namun, bagi manusia dibutuhkan waktu lebih lama untuk mengisi suatu bidang. Secara default parameter ini diatur ke 3 detik. Tidak disarankan untuk menetapkan lebih dari 3 detik.

maxInputLength

Bilangan bulat

Ya

Ini menentukan panjang maksimum karakter di kolom pencarian.

templat

Rangkaian

Ya

Ini menentukan nama templat yang terletak di folder templat

Pertanyaan Umum

Apa risiko menonaktifkan anti_bot dan token?
form_anti_bot adalah fitur keamanan yang bagus untuk dimiliki tetapi sebaiknya dihapus saja. Untuk mencapai ini, Anda perlu mengubah validateRequest() di core/AjaxProcessor.php dan menghapus $_POST['ls_anti_bot'] serta mengubah verifySessionValue($sessionParameter, $sessionValue) di core/Handler.php . Sebaliknya, menghapus token memungkinkan siapa saja membuat formulir dan menggunakan server Anda sebagai sumber data dan oleh karena itu hal ini tidak disarankan. Saat ini, setiap kali halaman/formulir pencarian dimuat, token baru dihasilkan dengan memanggil getToken() di halaman formulir ( index.php dalam contoh saat ini). Kemudian token dan anti_bot diperiksa menggunakan verifySessionValue($sessionParameter, $sessionValue) setelah mencari/mengirim permintaan baru ke server. Jika ini tampak berlebihan bagi Anda, di getToken() kembalikan token yang sama untuk sesi yang ada.
Bagaimana kolom bisa disembunyikan di hasil?
Ini dapat dicapai di template Anda. Contohnya dapat ditemukan di templates/hiddenColumn.php