Question

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

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

我想在它上面做一个自动完成，类似于typeahead。自动完成部分有效，但我想在文本框中显示第一个建议：

例如，写了“Al”并得到以下建议：

文本框：Al

阿拉巴马
阿尔及利亚

我希望在文本框中有褪色文字：Al abama （abama要褪色）。

如何使用jQuery或纯JS执行此操作？基本上在同一个文本框中，2个子字符串有两种文本样式？

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

Answer 1

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

这比你需要的更纤巧。我选择了文本而不是淡化它，因为你不能在文本框中做半褪色文本。让我知道你的想法。

HTML：

import UIKit

class GlobalSplitViewController: UISplitViewController, UISplitViewControllerDelegate {

func primaryViewControllerForCollapsingSplitViewController(splitViewController: UISplitViewController) -> UIViewController? {

    let detailViewController = self.viewControllers[1] as! TodayViewController

    return detailViewController
}

func splitViewController(splitViewController: UISplitViewController, collapseSecondaryViewController secondaryViewController: UIViewController, ontoPrimaryViewController primaryViewController: UIViewController) -> Bool {

    return true

}

func splitViewController(svc: UISplitViewController, shouldHideViewController vc: UIViewController, inOrientation orientation: UIInterfaceOrientation) -> Bool {
    return false
}


}

javascript：

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

Typeahead输入元素样式

1 个答案: