如何实现一个google建议的输入字段？ [英] How to implement a google suggest-like input field?

问题描述

我正在使用自己的自动完成/建议脚本，我想要达到Google在其主要网站上的类似效果。

I'm currently working on my own autocomplete/suggest script and I want to achieve similar effect Google has on their main site.

当用户开始输入（for实例堆栈），4个建议显示在下面的下拉列表中，但同时，顶部的一个显示输入字段灰色：

When user starts typing (for instance stack), 4 suggestions show up on a dropdown list below but... also, at the same time the one that is at the top shows "in" the input field in grey color:

如何在另一个字符串中输入不同的样式？

How would it possible to put another string in input with a different style?

这是一个< span> 超过输入的 z-index 值？当我点击字符串的灰色部分时，输入字段不会得到焦点，所以我相信有一些东西必须结束。

Is this a <span> over input with the greater z-index value? When I click on the grey part of the string the input field doesn't get the focus so I believe something has to be over it.

如果事实上这是一个< span> （或另一个< div> ; ）坐在输入端，那么他们如何知道字符串的第一部分（ stack ）结束以及位置（宽度） overflow word（在这种情况下）。

If in fact this is a <span> (or another <div>) sitting over the input then how do they know where the first part of the string (stack) ends and where to position (width) the overflow word (in this case).

有没有人知道如何实现这个效果？

Does anybody know how to achieve this effect?

推荐答案

检查代码，我发现它是另一个输入字段之上的输入字段。自动完成输入字段设置为禁用，给出灰色。

After inspecting the code, I have found that it is an input field on top of another input field. The autocompleted input field is set to disabled, giving it the gray color.

使用这种方法，他们不必须计算字符串如上所述的结束位置，只需将实际的输入字段放在autocomlete 输入字段之间

Using this method they don't have to calculate where the string ends like you said above, just absolutely position the actual input field over the autocomlete input field.

示例：

更新

快速演示 http://jsfiddle.net/dargf/

当然，你必须添加到你的自己的自动完成JavaScript，但这是风格的一个例子。

Here is a quick demo http://jsfiddle.net/dargf/
Of course, you would have to add in your own autocomplete javascript, but that's an example of the style.

HTML

<div>
    <input id="main" type="text" />
    <input id="autocomplete" type="text" disabled="disabled" />
</div>

CSS

div
{
    position: relative;
}
#main{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    background: transparent;

}
#autocomplete{
    position: absolute;    
    top: 0;
    left: 0; 
    background: transparent;
    z-index: 10;
}

Javascsript

$('#main').keyup(function(e){
    console.log(e);
    $('#autocomplete').val($(this).val() + 'asdf')
});

这篇关于如何实现一个google建议的输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！