машинописный входной элемент стилизации

Question

У меня есть простой ввод текстового поля, который выглядит следующим образом:

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

, и я хочу сделать автозаполнение на нем, похожий на машинописный. Частичные работы автозаполнения, но я хочу, чтобы отобразить в текстовое поле первое предложение:

Например, написав "Аль", и я получаю следующие предложения:

Textbox: Al

• Alabama
• Алжир

Я хочу, чтобы в текстовом поле, а выцветший текст: Al Abama (Abama к быть бледным).

Как это сделать с помощью jQuery или чистого JS? Имея в основном в том же текстовом поле, 2 стиля текста для 2 подстрок?

Если есть другие способы (например, наложение на него другого прозрачного текстового элемента управления), и вы можете показать мне пример, который был бы замечательным. Я не могу изменить элемент input (то есть заданный).

Answer 1

код пера: 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); 
    } 
});