Cách tắt tự động hoàn tất trong khi tiếp tục sử dụng phần tử dữ liệu trong html

Question

Tôi có trường input hiển thị danh sách sử dụng phần tử html5 <datalist>. Vấn đề là với <datalist> tính năng tự động hoàn thành của trình duyệt cũng hiển thị danh sách lịch sử (đây là danh sách các giá trị đã nhập trước đó, không được bao gồm trong số <datalist>). Vì vậy, tôi chỉ muốn loại bỏ các history-list không phải là <datalist>.

Nếu tôi sử dụng tính năng autocomplete = "off", điều này cũng chặn <datalist>.

Tóm lại, tôi chỉ muốn <datalist> không phải là lịch sử.

Answer 1

Hãy thử điều này, tôi hy vọng công việc của mình

<input id="datalisttestinput" list="stuff" autocomplete="off"></input> 
     <datalist id="stuff"> 
      <option id="3" value="Collin" > 
      <option id="5" value="Carl"> 
      <option id="1" value="Amy" > 
      <option id="2" value="Kristal"> 
     </datalist> 

Chúc

Answer 2

tôi sử dụng một mã như thế này:

<input name="anrede" list="anrede" onmousedown="value = '';" /> 
<datalist id="anrede"> 
    <option value="Herr"></option> 
    <option value="Frau"></option> 
</datalist> 

tốt: Các datalist hiển thị cho lựa chọn hoàn tất

xấu: Các lĩnh vực đầu vào trống, do đó giá trị cũ không được ghi nhận, nếu cần thiết để được nhớ đến bởi người sử dụng

Answer 3

Có thể để bạn có thể sử dụng trường input mà không có một thuộc tính id hoặc name? Không có điều đó, trình duyệt không thực sự có bất kỳ cách nào để liên kết lịch sử với phần tử đó.

Trong thật nhanh thử nghiệm của tôi trên Firefox, điều này dường như làm các trick:

<form> 
    <!-- these will remember input --> 
    With id: <input id="myInputId" list="myList" /><br /> 
    With name: <input name="myInputName" list="myList" /><br /> 

    <!-- these will NOT remember input --> 
    No id, name, class: <input list="myList" /><br /> 
    With class: <input class="myInputClass" list="myList" /> 

    <datalist id="myList"> 
    <option value="Option 1"></option> 
    <option value="Option 2"></option> 
    </datalist> 

    <br /> 

    <input type="submit" /> 
</form> 

Trong đoạn mã trên, các input s với một id hoặc name sẽ nhớ các giá trị trong quá khứ, nhưng input không mọi thứ và đầu vào chỉ với một số class sẽ không phải ghi nhớ bất cứ điều gì.

Thật không may, điều này giúp bạn sử dụng input hơi khó khăn hơn nếu bạn cần nó để có một name hoặc id. Trong trường hợp đó, tôi sẽ thử có một số id 'ed input cũng được biên soạn display: none' và sau đó sử dụng một số JavaScript để giữ cho nó được đồng bộ hóa với một số input sẽ không nhớ giá trị quá khứ.

Answer 4

Hãy thử sử dụng HTML thuộc tính tự động hoàn thành

<input name="q" type="text" autocomplete="off"/> 

nguồn Turn Off Autocomplete for Input