关于 JQuery UI 自动完成和文本框建议。！

Question

我正在尝试为文本框实现自动完成组件。我使用 jquery ui 自动完成插件，它有点像下拉列表而不是自动完成的东西。！

我见过一些例子，就像用户写作时一样，它在一些选项下方显示，但也写了第一个选项的补码以选择作为“html占位符”，所以它看起来像：

|“IM SEARCHING SOMET_”堆栈溢出 |

（我知道你明白了）

我需要指导用户写什么，并强迫他选择我提出的项目之一（使用 json 或其他东西），比如真正自动“完成”他正在写的内容。我想要那个插件上的“selectFirst”属性。好像上面没有类似的东西。那么，你们有什么建议呢？

我想在插件的“打开”事件上编写一些代码，但不知道从哪里开始。也许已经完成了一些事情，所以我不必为此浪费一周的时间。

我的代码已经看起来像：

$(".destination").autocomplete({
            minLength: 2,
            autoFocus: true, open: function(event, ui){ /* DO THE MAGIC HERE */ },
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("SearchDestinations", "Json")", type: "POST", dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function(item){
                            return { label: item.Description, value: item.Description, id: item.Id };
                        }));
                    }
                })
            }
        });

在此先感谢（如果这太笨了，很抱歉）。！

Answer 1

这不是自动完成文本框非常常见的行为，而且您没有详细说明为什么要尝试引导用户进行选择（您怎么知道第一个选择总是最好的？）。

如果您确实设置了这样的功能，请确保在用户输入后以非常不同的方式设置默认进入框中的文本样式，以便用户可以清楚地看到他们输入的内容和您的建议（查看 Google Instant 如何使用浅色文本处理其搜索结果 - 另请注意，Google 不会尝试引导您的搜索，而是向您展示 Instant Search 结果的用途）。用户可能会或可能不会惊讶地看到在他们输入的内容之后出现了额外的文本，并且鉴于他们的眼睛专注于文本框，他们可能倾向于接受它作为他们的输入，而不考虑下面出现的任何其他可能更好的选项。在进行用户测试时，您需要考虑这两点。

话虽如此，您可以使用类似于以下的选择器访问自动完成下拉列表中第一个可选项目的文本：

$(".ui-autocomplete li:first a").text();

然后，使用通用 JavaScript substr() 方法，您可以仅从用户输入后的选择中获取文本，并在用户输入后将其显示在文本框中。