如何使文本輸入始終自動完成

Question

看起來好像一些文本輸入立即給了我一個「下拉列表」，它帶有我過去填寫的值。其他時間沒有。有沒有辦法我可以「鼓勵」這種行爲在輸入框？爲什麼有時會發生這種情況，有時候不會呢我是否需要爲重複用戶提供cookie或其他設備以確保他們具有此功能，或者是否存在一些jquery選項？ （因爲我已經在使用它）。

Answer 1

這是一個依賴於瀏覽器的功能。瀏覽器可能會查看文本輸入字段的ID和/或名稱並保存您輸入的值。

由於您訪問的網站上使用的輸入字段的ID /名稱，它可能是不透明的。

Answer 2

瀏覽器根據輸入類型和名稱爲您提供過去填充的值。

因此，當某人在examplea.com上編寫一個名爲「login」的輸入的表單時，當您繼續訪問exampleb.com並且還有一個名爲「login」的輸入時，瀏覽器會檢測到該輸入並且您已經有一些info之前填入名爲「login」的輸入信息並顯示一些選項。

這就是瀏覽器的行爲。

對於jQuery的選項，你可以在http://jqueryui.com/autocomplete/

Answer 3

使用jQuery UI的自動完成這是一個想法。如果您想爲頁面上的每個輸入字段具有特定的下拉值列表。然後用一個小小的javascript，google關閉編譯器以及爲瀏覽器創建收藏夾/書籤的知識，您可以在任何網頁上添加類似的東西。

這裏是jsfiddle

HTML

<input type="text" /> 
<input type="text" /> 
<input type="text" /> 
<input type="text" list="sitelist" /> 
<datalist id="sitelist"> 
    <option label="Lorem" value="Lorem"> 
    <option label="Ipsum" value="Ipsum"> 
    <option label="Dolor" value="Dolor"> 
</datalist> 

我的示例代碼的Javascript

(function() { 
    var d = "proin vestibulum ipsum vel tortor sollicitudin luctus".split(" "), 
     l = document.createElement("datalist"); 

    l.id = "myDynamicDatalist"; 
    d.forEach(function (w) { 
     var o = document.createElement("option"); 
     o.label = w; 
     o.value = w; 
     l.appendChild(o); 
    }); 

    document.body.appendChild(l); 

    Array.prototype.forEach.call(document.getElementsByTagName("input"), function (e) { 
     if (e.list === null || e.list === "") { 
      e.setAttribute("list", l.id); 
     } 
    }); 
}()); 

現在使用Google's closure compiler，你可以擺脫所有的空白，縮短東西單行通過將該選項設置爲「簡單」，然後以此結束。

(function(){var b=document.createElement("datalist");b.id="myDynamicDatalist";"proin vestibulum ipsum vel tortor sollicitudin luctus".split(" ").forEach(function(a){var c=document.createElement("option");c.label=a;c.value=a;b.appendChild(c)});document.body.appendChild(b);Array.prototype.forEach.call(document.getElementsByTagName("input"),function(a){(null===a.list||""===a.list)&&a.setAttribute("list",b.id)})})(); 

現在預先考慮到該行以javascript:並將其保存到收藏夾/書籤和自己創建一個javascript bookmarklet。

給它一個去。在SO上單擊您最喜歡的/書籤，然後雙擊搜索框，瞧！！

你甚至可以使用jquery創建bookmarklet，而j​​queryui意味着你可以使用自動完成功能。