輸入事先鍵入的內容元素的造型

我有一個簡單的文本框輸入，看起來像這樣：輸入事先鍵入的內容元素的造型

<input type="text" placeholder="Search for states">

，我希望做就可以自動完成，類似的預輸入。自動完成部分工作，但我想在文本框中的第一個建議顯示：

例如，編寫過「基地」和我得到了以下的建議：

文本框：鋁

阿拉巴馬
阿爾及利亞

我想在文本框中，如褪色的文字：鋁ABAMA（該ABAMA到褪色）。

我該如何使用jQuery或純JS來做到這一點？基本上在相同的文本框中，2個子字符串有2種文本樣式？

如果還有其他方法（例如覆蓋另一個透明文本控件），您可以給我一個很棒的例子。我無法更改input元素（這是給定的）。

來源

2016-06-14 Tamas Ionut

我試圖添加一個div覆蓋有褪色的文字（在本例中ABAMA），但我不能讓他們的權利（如何附加div來完美匹配輸入），我想如果有更好的方法（通過CSS或其他）來實現這一點。此外，我不想讓「阿巴馬」文本可以選擇，只是在那裏顯示用戶想要選擇，如果他點擊標籤。 –

我的意思是，它是發佈你的代碼.. –

代碼筆： http://codepen.io/mozzi/pen/XKKJWq

這是你所需要的非常slimier。我選擇了文本而不是淡入淡出，因爲您無法在文本框中進行半淡出的文本。讓我知道你的想法。

HTML：

<div class="ui-widget"> 
    <label for="automplete-1">Type state name: </label> 
    <input id="automplete-1" placeholder="U.S. state name"> 
</div>

的javascript：

$("#automplete-1").autocomplete({ 
    delay: 0, 
    source: UsStateNames, 
    response: function(event, ui) { 
    var start = $("#automplete-1").val().length; 
    $("#automplete-1").val(ui.content[0].value); 
    var end = ui.content[0].value.length; 
    $("#automplete-1")[0].setSelectionRange(start, end); 
    } 
});

來源

2016-06-15 04:19:13

你可以離開建議列表下的文本框或刪除它。我只是把它留給了知名度。 –

輸入事先鍵入的內容元素的造型

回答

相關問題