输入事先键入的内容元素的造型

我有一个简单的文本框输入，看起来像这样：输入事先键入的内容元素的造型

<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

你可以离开建议列表下的文本框或删除它。我只是把它留给了知名度。 –

输入事先键入的内容元素的造型

回答

相关问题