Question

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

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

|“IM SEARCHING SOMET_” hing on stack overflow |

（我知道你明白了）

我需要引导用户他正在写的东西，并强迫他选择我提出的一个项目（使用json或其他东西），就像真正自动“完成”他正在写的东西一样。我想在该插件上使用“selectFirst”属性。似乎没有任何类似的东西。那么，你们建议的是什么？

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

我的代码看起来像是：

$(".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

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

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

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

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

然后，使用常规JavaScript substr（）方法，您只需抓取用户输入后的选择中的文本，并在用户输入后将其显示在文本框中。< / p>

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

1 个答案: