Tính năng tự động hoàn thành giao diện người dùng jQuery có thể nhận 3 loại giá trị khác nhau của tùy chọn nguồn :
- Một mảng chứa danh sách những thứ cần điền vào tự động hoàn thành
- Một chuỗi chứa URL của một tập lệnh lọc danh sách và gửi cho chúng tôi kết quả. Plugin sẽ nhận văn bản được nhập vào nó và gửi nó dưới dạng
term
trong một chuỗi truy vấn được nối vào URL mà chúng tôi đã cung cấp. - Một chức năng truy xuất dữ liệu và sau đó gọi một cuộc gọi lại với dữ liệu đó.
Mã ban đầu của bạn sử dụng đầu tiên, một mảng.
var availableTags = [
"autocomplete.php";
];
Điều nói với tự động hoàn thành là chuỗi "autocomplete.php"
là thứ duy nhất trong danh sách những thứ cần tự động hoàn thành.
Tôi nghĩ những gì bạn đang cố gắng làm là nhúng nó với một cái gì đó như thế này:
$(function() {
var availableTags = [
<?php include("autocomplete.php"); /* include the output of autocomplete as array data */ ?>;
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Điều đó có thể sẽ hoạt động tốt giả sử rằng danh sách những thứ đang được trả về từ cơ sở dữ liệu sẽ luôn ngắn. Làm theo cách này khá mỏng manh vì bạn chỉ đang chuyển đầu ra thô từ PHP vào JS của mình. Nếu dữ liệu trả về chứa "
bạn có thể phải sử dụng addSlashes
để thoát khỏi nó một cách chính xác. Tuy nhiên, bạn nên thay đổi truy vấn để trả về một trường duy nhất thay vì *
, bạn có thể chỉ muốn một trường làm nhãn trong tự động điền chứ không phải toàn bộ hàng.
Một cách tiếp cận tốt hơn, đặc biệt nếu danh sách có khả năng tăng rất lớn, sẽ là sử dụng phương pháp thứ hai:
$(function() {
var availableTags = "autocomplete.php";
$( "#tags" ).autocomplete({
source: availableTags
});
});
Điều này sẽ yêu cầu bạn thực hiện thay đổi đối với tập lệnh back-end đang lấy danh sách để nó thực hiện quá trình lọc. Ví dụ này sử dụng một câu lệnh chuẩn bị sẵn
để đảm bảo người dùng đã cung cấp dữ liệu trong $term
không mở ra cho bạn Chèn 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);
?>
Đã một thời gian kể từ khi tôi làm việc với mysqli, vì vậy mã đó có thể cần một số chỉnh sửa vì nó chưa được kiểm tra.
Sẽ rất tốt nếu bạn có thói quen sử dụng các câu lệnh đã chuẩn bị sẵn vì khi được sử dụng đúng cách, chúng sẽ khiến việc chèn SQL không thể thực hiện được. Thay vào đó, bạn có thể sử dụng một câu lệnh bình thường không được chuẩn bị trước, thoát khỏi mọi mục do người dùng cung cấp bằng mysqli_real_escape_string trước khi bạn chèn nó vào câu lệnh SQL của mình. Tuy nhiên , làm điều này rất dễ xảy ra lỗi. Bạn chỉ cần quên thoát khỏi một thứ để mở mình trước các cuộc tấn công. Hầu hết " hack "chính trong lịch sử gần đây là do mã hóa cẩu thả dẫn đến lỗ hổng SQL injection.
Nếu bạn thực sự muốn gắn bó với câu lệnh không chuẩn bị, mã sẽ trông giống như sau:
<?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);
?>