script.aculo.us - Tự động hoàn thành
Ngoài ra, script.aculo.us hỗ trợ hai nguồn để tự động hoàn thành -
- Các nguồn từ xa (lấy thông qua Ajax),
- Nguồn cục bộ (mảng chuỗi trong tập lệnh trang web của bạn).
Tùy thuộc vào nguồn bạn định sử dụng, bạn sẽ khởi tạo Ajax.Autocompleter hoặc Autocompleter.Local tương ứng. Mặc dù được trang bị các tùy chọn cụ thể, hai đối tượng này chia sẻ một bộ tính năng lớn và cung cấp trải nghiệm người dùng đồng nhất.
Có bốn điều bạn sẽ luôn chuyển cho những đối tượng này trong khi xây dựng chúng -
Trường văn bản bạn muốn tạo tự động hoàn thành. Như thường lệ, bạn có thể chuyển chính trường hoặc giá trị của thuộc tính id = của nó.
Vùng chứa cho các lựa chọn tự động hoàn thành, cuối cùng sẽ chứa một danh sách <ul> </li> Các tùy chọn để chọn. Một lần nữa, chuyển trực tiếp phần tử hoặcid =. Phần tử này thường là một <div>.</p> </li> đơn giản
Nguồn dữ liệu, sẽ được thể hiện, tùy thuộc vào loại nguồn, dưới dạng một mảng chuỗi JavaScript hoặc dưới dạng URL đến nguồn từ xa.
Cuối cùng là các tùy chọn. Như mọi khi, chúng được cung cấp dưới dạng băm và cả hai đối tượng tự động hoàn thành đều có thể thực hiện mà không có tùy chọn tùy chỉnh; có các giá trị mặc định phù hợp cho mọi thứ.
Để sử dụng khả năng tự động hoàn thành của script.aculo.us, bạn sẽ cần tải các mô-đun control.js và Effects.js cùng với mô-đun prototype.js. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ trông như thế này -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>Tạo trình hoàn thành tự động Ajax
Cú pháp xây dựng như sau:
new Ajax.Autocompleter(element, container, url [ , options ] )Hàm tạo cho Ajax.Autocompleter chấp nhận bốn tham số:
Tên phần tử hoặc tham chiếu đến trường văn bản sẽ được điền với một lựa chọn dữ liệu.
Tên phần tử hoặc tham chiếu đến phần tử <div> sẽ được điều khiển sử dụng làm menu lựa chọn.
URL của tài nguyên phía máy chủ sẽ cung cấp các lựa chọn.
Các tùy chọn thông thường băm.
Tùy chọn
Bạn có thể sử dụng một hoặc nhiều tùy chọn sau trong khi tạo đối tượng Ajax.Autocompleter.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | paramName Tên của tham số truy vấn chứa nội dung của trường văn bản được đăng lên tài nguyên phía máy chủ. Mặc định là tên của trường văn bản. |
| 2 | minChars Số ký tự phải được nhập trước khi có thể thực hiện yêu cầu lựa chọn phía máy chủ. Mặc định là 1. |
| 3 | Frequency Khoảng thời gian, tính bằng giây, giữa các lần kiểm tra nội bộ để xem liệu yêu cầu đối với tài nguyên phía máy chủ có được đăng hay không. Mặc định là 0,4. |
| 4 | Indicator Id hoặc tham chiếu đến một phần tử sẽ được hiển thị trong khi yêu cầu lựa chọn phía máy chủ đang được thực hiện. Nếu bỏ qua, không có phần tử nào được tiết lộ. |
| 5 | Parameters Chuỗi văn bản chứa các tham số truy vấn bổ sung sẽ được chuyển đến tài nguyên phía máy chủ. |
| 6 | updateElement Một chức năng gọi lại sẽ được kích hoạt khi người dùng chọn một trong các lựa chọn được trả về từ máy chủ để thay thế chức năng nội bộ cập nhật trường văn bản với giá trị đã chọn. |
| 7 | afterUpdateElement Một hàm gọi lại sẽ được kích hoạt sau khi hàm updateElement đã được thực thi. |
| số 8 | Tokens Một chuỗi văn bản hoặc một mảng chuỗi văn bản cho biết mã thông báo được sử dụng làm dấu phân tách để cho phép nhiều phần tử được nhập vào trường văn bản, mỗi phần tử có thể được tự động hoàn thành riêng lẻ. |
Thí dụ
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.Autocompleter(
'autoCompleteTextField',
'autoCompleteMenu',
'/script.aculo.us/serverSideScript.php', {}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Bây giờ, chúng ta cần một phía máy chủ để truy cập trang này và cung cấp URL nguồn dữ liệu (serverSideScript.php). Bạn sẽ giữ một logic hoàn chỉnh để hiển thị các đề xuất trong tập lệnh này.
Ví dụ: chúng tôi đang giữ một văn bản HTML đơn giản trong serverSideScript.php . Bạn có thể viết tập lệnh của mình bằng CGI, PHP, Ruby hoặc bất kỳ tập lệnh phía máy chủ nào khác để chọn các gợi ý phù hợp và định dạng chúng dưới dạng <ul><<ul><ul><ul> <li> và chuyển chúng lại vào chương trình người gọi.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>Điều này sẽ tạo ra kết quả sau:
với các tùy chọn khác nhau được thảo luận trong bảng trên.
Tạo trình hoàn thành tự động cục bộ
Việc tạo bộ tự động hoàn thành cục bộ gần giống với việc tạo bộ tự động hoàn thành Ajax như chúng ta đã thảo luận trong phần trước.
Sự khác biệt chính nằm ở cách xác định bộ dữ liệu sao lưu để sử dụng cho quá trình tự động hoàn thành đối với bộ điều khiển.
Với Ajax Auto-completeter, chúng tôi đã cung cấp URL của tài nguyên phía máy chủ sẽ thực hiện lọc cần thiết, cung cấp đầu vào của người dùng và chỉ trả lại các phần tử dữ liệu phù hợp. Với Local Autocompleter, chúng tôi cung cấp danh sách đầy đủ phần tử dữ liệu thay thế, dưới dạng một mảng Chuỗi JavaScript và bản thân điều khiển thực hiện thao tác lọc trong mã ứng dụng khách của chính nó.
Toàn bộ cú pháp xây dựng thực tế như sau:
new Autocompleter.Local(field, container, dataSource [ , options ] );Hàm tạo cho Autocompleter.Local chấp nhận bốn tham số:
Tên phần tử hoặc tham chiếu đến trường văn bản sẽ được điền với một lựa chọn dữ liệu.
Tên phần tử hoặc tham chiếu đến phần tử <div> được điều khiển sử dụng làm menu lựa chọn
Đối với tham số thứ ba, thay vì URL như với trình tự động hoàn thành do máy chủ hỗ trợ, chúng tôi cung cấp một mảng Chuỗi nhỏ, chứa tất cả các giá trị có thể có.
Các tùy chọn thông thường băm.
Tùy chọn
Bạn có thể sử dụng một hoặc nhiều tùy chọn sau trong khi tạo đối tượng Autocompleter.Local.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | Choices Số lượng lựa chọn để hiển thị. Mặc định là 10. |
| 2 | partialSearch Cho phép đối sánh ở đầu các từ được nhúng trong chuỗi hoàn thành. Giá trị mặc định là true. |
| 3 | fullSearch Cho phép khớp ở bất kỳ đâu trong chuỗi hoàn thành. Giá trị mặc định là false. |
| 4 | partialChars Xác định số ký tự phải được nhập trước khi thử đối sánh từng phần. Mặc định là 2. |
| 5 | ignoreCase Bỏ qua trường hợp khi đối sánh. Giá trị mặc định là true. |
Thí dụ
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Autocompleter.Local(
'autoCompleteTextField',
'autoCompleteMenu',
['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
{ignoreCase:false}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Khi được hiển thị và sau khi ký tự 'a' được nhập vào hộp văn bản, nó sẽ hiển thị tất cả các tùy chọn phù hợp.
Sử dụng trình biên dịch trực tuyến của chúng tôi để hiểu rõ hơn về mã với các tùy chọn khác nhau được thảo luận trong bảng trên.
Điều này sẽ tạo ra kết quả sau: