Pelengkapan otomatis UI jQuery dapat mengambil 3 jenis nilai yang berbeda dari opsi sumber :
- Sebuah larik berisi daftar hal yang harus diisi otomatis lengkap dengan
- Sebuah string berisi URL skrip yang memfilter daftar dan mengirimkan hasilnya kepada kami. Plugin akan mengambil teks yang diketik ke dalamnya dan mengirimkannya sebagai
term
parameter dalam string kueri yang ditambahkan ke URL yang kami berikan. - Sebuah fungsi yang mengambil data dan kemudian memanggil panggilan balik dengan data tersebut.
Kode asli Anda menggunakan yang pertama, sebuah array.
var availableTags = [
"autocomplete.php";
];
Apa yang memberitahu pelengkapan otomatis adalah bahwa string "autocomplete.php"
adalah satu-satunya hal dalam daftar hal-hal yang harus dilengkapi secara otomatis.
Saya pikir apa yang Anda coba lakukan adalah menyematkannya dengan sesuatu seperti ini:
$(function() {
var availableTags = [
<?php include("autocomplete.php"); /* include the output of autocomplete as array data */ ?>;
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Itu mungkin akan berfungsi dengan baik dengan asumsi bahwa daftar hal-hal yang dikembalikan dari database akan selalu tetap pendek. Melakukannya dengan cara ini agak rapuh karena Anda hanya memasukkan output mentah dari PHP ke JS Anda. Jika data yang dikembalikan berisi "
anda mungkin harus menggunakan addSlashes
untuk menghindarinya dengan benar. Namun Anda harus mengubah kueri untuk mengembalikan satu bidang daripada *
, Anda mungkin hanya menginginkan satu bidang sebagai label dalam pelengkapan otomatis, bukan seluruh baris.
Pendekatan yang lebih baik, terutama jika daftar tersebut berpotensi tumbuh sangat besar, adalah dengan menggunakan metode kedua:
$(function() {
var availableTags = "autocomplete.php";
$( "#tags" ).autocomplete({
source: availableTags
});
});
Ini akan mengharuskan Anda untuk membuat perubahan pada skrip back-end yang mengambil daftar sehingga melakukan pemfilteran. Contoh ini menggunakan pernyataan yang sudah disiapkan
untuk memastikan pengguna memberikan data dalam $term
tidak membuka Anda hingga injeksi SQL
:
<?php
include('conn.php');
// when it calls autocomplete.php, jQuery will add a term parameter
// for us to use in filtering the data we return. The % is appended
// because we will be using the LIKE operator.
$term = $_GET['term'] . '%';
$output = array();
// the ? will be replaced with the value that was passed via the
// term parameter in the query string
$sql="SELECT name FROM oldemp WHERE name LIKE ?";
$stmt = mysqli_stmt_init($mysqli);
if (mysqli_stmt_prepare($stmt, $sql)) {
// bind the value of $term to ? in the query as a string
mysqli_stmt_bind_param($stmt, 's', $term);
mysqli_stmt_execute($stmt);
// binds $somefield to the single field returned by the query
mysqli_stmt_bind_result($stmt, $somefield);
// loop through the results and build an array.
while (mysqli_stmt_fetch($stmt)) {
// because it is bound to the result
// $somefield will change on every loop
// and have the content of that field from
// the current row.
$output[] = $somefield;
}
mysqli_stmt_close($stmt);
}
mysqli_close($mysqli);
// output our results as JSON as jQuery expects
echo json_encode($output);
?>
Sudah lama saya tidak menggunakan mysqli, sehingga kode tersebut mungkin memerlukan beberapa penyesuaian karena belum diuji.
Akan lebih baik untuk membiasakan diri menggunakan pernyataan yang disiapkan karena bila digunakan dengan benar, mereka membuat injeksi SQL menjadi tidak mungkin. Sebagai gantinya Anda dapat menggunakan pernyataan non-siap normal, keluar dari setiap item yang disediakan pengguna dengan mysqli_real_escape_string sebelum Anda memasukkannya ke dalam pernyataan SQL Anda. Namun , melakukan ini sangat rawan kesalahan. Hanya perlu melupakan untuk melarikan diri satu hal untuk membuka diri terhadap serangan. Sebagian besar "peretasan" utama dalam sejarah baru-baru ini disebabkan oleh pengkodean yang ceroboh yang memperkenalkan kerentanan injeksi SQL.
Jika Anda benar-benar ingin tetap menggunakan pernyataan non-prepared, kodenya akan terlihat seperti ini:
<?php
include('conn.php');
$term = $_GET['term'];
$term = mysqli_real_escape_string($mysqli, $term);
$output = array();
$sql = "SELECT name FROM oldemp WHERE name LIKE '" . $term . "%';";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error());
while($row=mysqli_fetch_array($result))
{
$output[] = $row['name'];
}
mysqli_close($mysqli);
// output our results as JSON as jQuery expects
echo json_encode($output);
?>