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

问题描述

我目前正在使用自己的自动完成/建议指令码，我想达到Google在主要网站上的类似效果。

当使用者开始输入实例 stack ），4个建议显示在下面的下拉列表中，但...同时，顶部的显示in输入字段灰色：

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

这是一个< span> / code> value？当我点击字符串的灰色部分的输入字段没有得到焦点，所以我相信一些东西必须超过它。

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

有人知道如何达到这个效果吗？

解决方案

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

使用此方法必须计算字符串的结束位置，如上所述，只需将实际输入字段定位在自动完成输入字段。

示例：

$ b

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

当然，您

HTML

$

b $ b

 < div> 
< input id =maintype =text/> 
< input id =autocompletetype =textdisabled =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'）
}）; 
  

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

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?

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.

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.

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.

Example:

Update

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屋！