Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hàm Auto-Complete
URL: https://www.javascriptbank.com/auto-complete-function-on-key-press.html
Hiệu ứng xây dựng một hàm Auto-Complete với tính năng tương tự trong các chương trình soạn thảo văn bản mà ta thường gặp. Đoạn mã này khá đơn giản, các đối tượng cần thiết để tạo Auto-Complete chỉ được đặt trong một mảng để duyệt mà không dùng bất kì một kĩ thuật phức tạp nào; nên tốc độ thực thi khá nhanh.Bạn cũng có thể xem thêm nhiều hiệu ứng tương tự như Auto-Complete & Vùng nhập liệu gợi nhớ.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Hàm Auto-Complete
URL: https://www.javascriptbank.com/auto-complete-function-on-key-press.html
<script type="text/javascript" name="autoComplete.js">// Created by: Ilanio :: http://www.webdeveloper.com/forum/showthread.php?t=119753// Details can be found here:// http://www.webdeveloper.com/forum/showthread.php?t=119753var aMail = new Array("albert@mail.com","steve@mail.com","beth@mail.com","harry@mail.com","barry@mail.com", "allen@mail.com", "susan@mail.com", "hal@mail.com");aMail.sort();function Complete(obj, evt) { if ((!obj) || (!evt) || (aMail.length == 0)) { return; } if (obj.value.length == 0) { return; } var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode; if ((elm < 32) || (elm >= 33 && elm <= 46) || (elm >= 112 && elm <= 123)) { return; } var txt = obj.value.replace(/;/gi, ","); elm = txt.split(","); txt = elm.pop(); txt = txt.replace(/^s*/, ""); if (txt.length == 0) { return; } if (obj.createTextRange) { var rng = document.selection.createRange(); if (rng.parentElement() == obj) { elm = rng.text; var ini = obj.value.lastIndexOf(elm); } } else if (obj.setSelectionRange) { var ini = obj.selectionStart; } for (var i = 0; i < aMail.length; i++) { elm = aMail[i].toString(); if (elm.toLowerCase().indexOf(txt.toLowerCase()) == 0) { obj.value += elm.substring(txt.length, elm.length); break; } } if (obj.createTextRange) { rng = obj.createTextRange(); rng.moveStart("character", ini); rng.moveEnd("character", obj.value.length); rng.select(); } else if (obj.setSelectionRange) { obj.setSelectionRange(ini, obj.value.length); }}</script><form name="anyForm"> <small>(Begin entering one of the names below)<br> <em>Albert, Allen, Barry, Beth, Hal, Harry, Steve, Susan</em></small><br><br> <strong>Send e-mail to:</strong> <input type="text" name="anyName" onKeyUp="Complete(this, event)"></form>