jquery - 自动完成灰色文本

Question

我正在我的网站上实现自动完成功能。但是，我不喜欢您必须“单击”建议才能将其放入表单字段中。

我希望显示灰色文本来暗示搜索词的其余部分，就像谷歌一样。如果用户点击选项卡，则显示该搜索词并且用户可以点击回车。

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

演示

Answer 2

通过使用 acontenteditable div而不是input，输入字段将立即调整大小，而不会出现由事件处理程序引起的延迟。然后只需将 aspan放在 div 的末尾并带有建议的文本。

此外，与简单的实现相比，jQuery 的自动完成处理程序似乎相当慢。这给出了以下非常平滑的结果：

演示

input不使用字段有一些明显的优点和缺点：

优点

• 自动完成文本的立即定位
• 单击灰色文本或其右侧，将您定向到输入字段

缺点

• 需要处理粘贴和拖动事件，因为您不希望 HTML 出现在表单字段中。（我在演示中没有这样做。）
• 与 contenteditable 字段有关的其他问题，例如在 contenteditable div 外部单击仍然会关注它吗？
• 在表单中使用时，不会提交来自 contenteditable 元素的内容，因此您需要注意这一点。

对我来说，零延迟胜过这些缺点。

---

应该注意，有很多事情我没有妥善处理：如果用户以某种方式设法将注意力集中在建议的文本内部或之后怎么办？（例如，通过在其下方轻轻单击。）如果用户从输入文本开始选择并以建议文本结束怎么办？它变得非常复杂。我认为这就是为什么很少看到这种自动完成灰色文本的原因。