cách tạo chức năng autocomplate cho textbox
trong bài viết trươc tôi đã hướng dẫn các bạn sử dụng datepicker bằng Jquey UI, là chức năng chọn ngày tháng khi click vào textbox sẽ hiện ra bảng ngày tháng cho các bạn chọn, nếu ai chưa đọc có thể xem tại đây
trong bài viết này tôi sẽ viết tiếp phần còn lại như đã hứa trong bài trước, chức năng autocomplate.
đây là một chức năng khá hữu dụng khi mà các trường của bạn quá nhiều và không thể sử dụng được bằng dropdown menu, khi các bạn gõ bất cứ ký tự nào nó sẽ tìm và so sánh với các kết quả có sẵn và phù hợp nhất để cho các bạn lựa chọn.
công việc đầu tiên và không thể thiếu chính là 3 dòng code sau đây, các bạn để nó trong phần <head> nhé:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>sau đó chúng ta sẽ tạo ra 1 textbox với class là “kq”
<input type="text" class"kq">đây là công đoạn để khai báo các hàm và thư viện của jquery và jquery ui, các bạn có thể download file này về và upload lên hosting của bạn cũng được, hoặc dùng cách này cho nhanh cũng được.
bây giờ đến công việc tiếp theo, các bạn tạo 1 file với tên list.txt chẳng hạn, trong đó các bạn để các kết quả trả về, mỗi kết quả sẽ nằm trên 1 dòng.
đây là đoạn code dùng để tạo ra ứng dụng autocomplate đây:
$(document).ready(function()
{
$.get( "http://abc.com/list.txt" ).done(function( data ) {
$( ".kq" ).autocomplete( { source: data.split( "\n" ) } );
});
});trong đoạn code trên có 2 phần đáng chú ý:
– “http://abc.com/list.txt” đây là đường dẫn đến file chứa kết quả của các bạn, các bạn có thể dễ dàng thay đổi kết quả trong file này.
– “.kq” cái này là claas như đã khai báo trong phần textbox ở trên cùng.
ngoài ra các bạn có thể tô son đánh phấn chút xíu cho phần css cho kết quả thêm pro 1 chút cũng được, như hightline kết quả nè, hover nè…
các bạn đã làm được chưa? chắc là được rồi đúng không?
phần này còn 1 cách làm khác nữa, nó có thể liên kết đến database của bạn, phần này có lẽ tôi sẽ hướng dẫn trong phần sau. Tôi chủ yếu viết các bài viết theo dạng ngẫu hứng, các thủ thuật và kinh nghiệm thực tế trong quá trình tôi làm, có thể làm một cách nhanh chóng mà không tốn quá nhiều công sức vì thực sự mình chỉ muốn đạt được kết quả mà thôi mà.
phần sau tôi sẽ hướng dẫn các bạn lấy từ sql ra để làm autocomplate nhé !
