Question

我正在我的网站上实施自动填充功能。但是，我不喜欢你如何“点击”这个建议，让它进入表单字段。

我希望灰色文字能够显示搜索字词的其余部分，就像Google一样。如果用户点击标签，则显示该搜索词，用户可以点击输入。

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

DEMO

Answer 2

通过使用contenteditable div而不是input，输入字段将立即调整大小，而没有事件处理程序引起的延迟。然后，只需在div的末尾放置一个span并附上建议的文字即可。

此外，与简单的实现相比，jQuery的自动完成处理程序似乎很慢。这样可以得到以下非常平滑的结果：

DEMO

不使用input字段有一些明显的利弊：

专业人士

立即定位自动填充文字
单击灰色文本或在其右侧，将您带至输入字段

缺点

需要处理粘贴和拖动事件，因为您不希望HTML最终出现在表单字段中。（我没有在演示中这样做。）
可编辑字段的其他问题，例如Clicking outside a contenteditable div stills give focus to it?
在表单中使用时，不会提交contenteditable元素中的内容，因此您需要注意这一点。

对我来说，零延迟要比那些弊端更为重要。

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

自动填充灰色文本

2 个答案: