javascript - Typeahead 输入元素样式

Question

我有一个简单的文本框输入，如下所示:

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

我想对其进行自动完成，类似于预先输入。自动完成部分有效，但我想在文本框中显示第一个建议:

例如，写了“Al”，我得到以下建议:

文本框:Al

• 阿拉巴马州
• Algolia

我想在文本框中添加褪色文本:Alabama(要褪色的 abama)。

如何使用 jQuery 或纯 JS 做到这一点？ 基本上在同一个文本框中，2 个子字符串有 2 种文本样式？

如果有其他方法(例如在其上覆盖另一个透明文本控件)，您可以向我展示一个很棒的示例。我无法更改 input 元素(这是给定的)。

Answer 1

代码笔: http://codepen.io/mozzi/pen/XKKJWq

这对于您的需要来说非常简单。我选择了文本而不是使其褪色，因为您无法在文本框中执行半褪色的文本。让我知道你的想法。

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);
  }
});