jquery - オートコンプリートの灰色のテキスト

Question

自分のサイトにオートコンプリートを実装しています。ただし、提案をフォームフィールドに表示するために提案を「クリック」する方法は好きではありません。

Googleのように、残りの検索用語を示唆する灰色のテキストを表示したいと思います。ユーザーがタブを押すと、その検索語が表示され、ユーザーはEnterキーを押すことができます。

Answer 1

これが私の解決策です。コードはすばやく記述されており、例としてのみ検討する必要があります。

HTML：

<div id="inp">
    <input type="text" id="search" value="" />
    <span id="ending" style="color: gray" ></span>
</div>

JS：

$( "#search" ).autocomplete({
    source: availableTags,
    //catch open event
    open: function(event, ui) {
        //get first item in opened list
        var firstInList = $(".ui-autocomplete").children('li').children('a').html();
        //find the difference and assign to span
        $('#ending').html(firstInList.substring(this.value.length))
    }
});

$('#search').keypress(function(e){
    var keyCode = e.keyCode || e.which;
    //if Tab
    if (keyCode == 9) {
        e.preventDefault();
        //get first item in list and assign to input
        $(this).val($(".ui-autocomplete").children('li').children('a').html());
        $(".ui-autocomplete").hide();
        $('#ending').empty();
    }
    //input width
    this.style.width = ((this.value.length + 1) * 6) + 4 + 'px';
});

デモ