Как реализовать поле ввода, подобное запросу google?

В настоящее время я работаю над своим собственным автозаполнением/предложением script, и я хочу добиться такого же эффекта, который Google на своем основном сайте.

Когда пользователь начинает вводить текст (например, stack), в раскрывающемся списке ниже отображается 4 предложения, но... кроме того, тот, который находится наверху, показывает "в" поле ввода в сером цвет:

Screenshot

Как можно поместить другую строку в ввод с другим стилем?

Является ли этот вход <span> более большим значением z-index? Когда я нажимаю на серой части строки, поле ввода не получает фокуса, поэтому я считаю, что над чем-то должно быть над ним.

Если на самом деле это <span> (или другой <div>), сидящий над входом, то как они узнают, где заканчивается первая часть строки (stack) и где для позиции (ширины) t26 > слово (в данном случае).

Кто-нибудь знает, как добиться этого эффекта?

Ответы

Ответ 1

После проверки кода я обнаружил, что это поле input поверх другого поля input. Поле autocompleted input отключено, придавая ему серый цвет.

Используя этот метод, им не нужно вычислять, где строка заканчивается, как вы сказали выше, просто установите фактическое поле input в поле autocomlete input.

Пример: enter image description here

Обновление

Ниже приведена демонстрация http://jsfiddle.net/dargf/
Конечно, вам придется добавить свой собственный автозаполненный javascript, но это пример стиля.

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

Ответ 3

Вход для поиска имеет прозрачный фон, и есть другое заблокированное поле ввода (с более низким z-индексом) со значением предложения, поэтому в отключенном поле вы видите только серая часть (имеется полный текст, но не может быть видно, что буквы на основном входе имеют черный цвет).

Оба абсолютно расположены в одном и том же положении.