hộp văn bản tự động điền javascript/html

Question

Tôi đang phát triển một trang web có yêu cầu về nhiều hộp văn bản tự động hoàn thành. Vì tôi mới sử dụng javascript, rất khó để tôi tạo hộp văn bản tự động hoàn thành của riêng mình. Vì vậy, tôi đã tìm kiếm nhiều ví dụ từ internet, nhưng họ chỉ làm việc cho một hộp văn bản duy nhất. Điều này có nghĩa là tôi không thể sử dụng cùng một tệp js để tạo một hộp văn bản tự động hoàn thành khác. Tôi đã không tìm thấy bất kỳ ví dụ như vậy trên stackoverflow hoặc. Ai đó có thể giúp tôi trong việc này?

Answer 1

Sử dụng JQuery với plugin AutoSuggest.

http://docs.jquery.com/Plugins/autocomplete

Bao gồm các thư viện JS (xem tài liệu trên), sau đó làm điều này trong HTML:

<input type="text" class="autocomplete" name="n1" /> 
<input type="text" class="autocomplete" name="n2" /> 
<input type="text" class="autocomplete" name="n3" /> 
<input type="text" class="autocomplete" name="n4" /> 

Sau đó, thêm một Autocomplete với CSS-class trong Javascript của bạn:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
$(".autocomplete").autocomplete(data); 

Answer 2

Nếu bạn chưa quen với phát triển web, tôi khuyên bạn nên sử dụng jquery và jqueryUI package. Liên kết ở trên là trang demo nơi bạn có thể chơi với các loại nguồn dữ liệu khác nhau. tôi đã sao chép một ví dụ trong đó sử dụng mảng đơn giản như một nguồn dữ liệu

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript",   "AppleScript", 
      "Asp",    "BASIC", 
      "C",    "C++", 
      "Clojure",    "COBOL", 
      "ColdFusion",   "Erlang", 
      "Fortran",    "Groovy", 
      "Haskell",    "Java", 
      "JavaScript",   "Lisp", 
      "Perl",    "PHP", 
      "Python",    "Ruby", 
      "Scala",    "Scheme" 
     ]; 
     $(".tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 

<div><input class="tags" type="text" /></div> 
<div><input class="tags" type="text" /></div> 

Answer 3

Plugin AutoSuggest đã bị phản đối và bây giờ được bao gồm trong jQuery UI.

Kiểm tra này ra:
http://jqueryui.com/demos/autocomplete/

Answer 4

Tôi khuyên bạn nên kiểm tra này:

http://complete-ly.appspot.com/

Các trường hợp đơn giản nên đáp ứng yêu cầu của bạn:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box'); 
cly.options = [ 'your','array','of','options','(possibly sorted somehow)']; 

Answer 5

Dưới đây là một phương pháp dễ dàng , chỉ cần sử dụng sự kiện onkeyup:

<input type="text" id="a" onkeyup="myFunction()"> 
<br/> 
<br/> 


<script type="text/javascript"> 
function myFunction() { 

    var x = document.getElementById("a").value; 

    document.getElementById("abc").innerHTML = x; 
} 
</script> 

Answer 6

Dưới đây là một giải pháp để tạo autocomplete với Không jQuery hoặc Không JAVASCRIPT .. html5 chỉ đơn giản là một hộp nhập liệu và một thẻ datalist ..

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox--> 
<datalist id="languageList"> 
<option value="HTML" /> 
<option value="CSS" /> 
<option value="JavaScript" /> 
<option value="SQL" /> 
<option value="PHP" /> 
<option value="jQuery" /> 
<option value="Bootstrap" /> 
<option value="Angular" /> 
<option value="ASP.NET" /> 
<option value="XML" /> 
</datalist> 

nạc thêm về nó here