Autocomplete là gì?
Autocomplete là tính năng tự động điền được sử dụng để cung cấp các gợi ý tự động cho người dùng khi nhập vào.
Trong hướng dẫn này, tôi xin chia sẻ cho các bạn cách tạo tính năng autocomplete cho input trên Website. Tính năng này sẽ gợi ý cho người dùng dựa trên từ khóa họ đã nhập vào trường nhập bằng cách sử dụng jQuery AJAX. Chức năng autocomplete sẽ được gọi trong sự kiện keyup của Input. Hàm này yêu cầu PHP cung cấp danh sách dữ liệu đầu vào qua AJAX, bằng cách gửi giá trị của trường đầu vào.
Autocomplete với tùy chọn mặc định
Đoạn code sau đây sẽ ví dụ cho trường hợp mặc định của Autocomplete. Ở trường hợp này không có truyền bất cứ tham số nào cho phương thức autocomplete().
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete Functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<!-- HTML Input with ID = automplete_1 -->
<div class = "ui-widget">
<label for = "automplete_1">Country: </label>
<input id = "automplete_1">
</div>
</body>
<script>
$(function() {
var Countries = ["Australia",
"Brazil",
"Cambodia",
"Canada",
"Indonesia",
"United Kingdom",
"United States of America",
"Vietnam",
"Zimbabwe"];
$( "#automplete_1" ).autocomplete({
source: Countries
});
});
</script>
</html>
Autocomplete với tùy chọn autoFocus, delay, minLength, ...
Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:
$(selector, context).autocomplete({option1: value1, option2: value2, option3: value3,..... });
Đoạn chương trình sau đây ví dụ về cách sử dụng các tùy chọn của autocomplete như: autoFocus, delay, minLength, ...
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete Functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<!-- HTML Input with ID = automplete_2 -->
<div class = "ui-widget">
<label for = "automplete_2">Country: </label>
<input id = "automplete_2">
</div>
</body>
<script>
$(function() {
var Countries = ["Australia",
"Brazil",
"Cambodia",
"Canada",
"Indonesia",
"United Kingdom",
"United States of America",
"Vietnam",
"Zimbabwe"];
$( "#automplete_2" ).autocomplete({
minLength: 2,
delay: 300,
source: Countries
});
});
</script>
</html>
Autocomplete với External Source
Nếu các bạn muốn sử dụng nguồn dữ liệu bên ngoài. Nguồn dữ liệu ngoài này có thể được cung cấp từ 1 file PHP hoặc JSON. Đối với nguồn ngoài từ file PHP, các bạn có thể dữ liệu từ Database trên MySQL. Đoạn chương trình sau là một ví dụ cho việc sử dụng nguồn dữ liệu ngoài:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete Functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<!-- HTML Input with ID = automplete_3 -->
<div class = "ui-widget">
<label for = "automplete_3">Country: </label>
<input id = "automplete_3">
</div>
</body>
<script>
$(function() {
$( "#automplete_3" ).autocomplete({
minLength: 2,
source: "search.php",
});
});
</script>
</html>
Trong đó file search.php bao gồm:
<?php
$term = $_GET[ "term" ];
$country = array(
array( "label" => "Australia", "value" => "AUS" ),
array( "label" => "United Kingdom", "value" => "UK" ),
array( "label" => "Vietnam", "value" => "VN" ),
array( "label" => "United States of America", "value" => "USA" ),
);
$result = array();
foreach ($country as $cty) {
$countryLabel = $cty[ "label" ];
if ( strpos( strtoupper($countryLabel), strtoupper($term) )!== false ) {
array_push( $result, $cty );
}
}
echo json_encode( $result );
?>
Khi người dùng chọn label được gợi ý, sẽ nhận được giá trị trả về là value.
Giả thuyết đặt ra là nếu bạn có một autocomplete chứa danh sách tên các Tỉnh/Thành phố. Nếu người dùng tìm và chọn 1 tỉnh, kết quả sẽ hiển thị tên các quận/huyện thuộc tỉnh đã chọn.
Để giải quyết được vấn đề này, mời các bạn xem bài viết kế tiếp. Trong bài viết tiếp theo, tôi chia sẻ cách sử dụng các thuộc tính như: select, _renderItem, _renderMenu, ...