自动完成功能禁止输入任意文本吗？

Question

在JQuery UI自动完成小部件中，是否可能禁止自由文本输入？

例如，我只希望用户被允许从自动完成列表中选择项目，并且不希望他们能够编写一些随意的文本。

我在演示/文档中没有看到任何描述如何实现此功能的内容。

http://jqueryui.com/demos/autocomplete/

我将使用自动完成功能，类似这样：

我正在这样使用自动完成

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }

- JK.

Answer 1

根据API文档，如果输入的内容不是从列表中选择的，change事件的ui属性将为null，因此您可以通过以下方式简单地禁止自由文本：

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    change: function(event, ui) {
        if (ui.item == null) {
          event.currentTarget.value = ''; 
          event.currentTarget.focus();
        }
    }
});

- Neils

---

对我有用，不错 :) - littledynamo

我也成功了 ;) - bungdito

change: (e, ui) -> ($ '#input_box').val('').focus() if not ui.item - Dom Vinyard

最佳答案，这是处理它的正确方式。 - Egli Becerra

应该是被接受的答案！我建议使用 $(this).val(""); $(this).focus();。 - Dan

Answer 2

如果您希望用户只从列表中获取项目，则使用自动完成组合框。 http://jqueryui.com/demos/autocomplete/#combobox 希望有所帮助。

- Raja

---

你仍然可以在那里输入，这正是他说他不想要的。 - Chad Birch

不，我认为他不想那样。我认为他想从列表项中获取它，即如果用户开始输入“Ja”，则如果它列出“Java”和“Javascript”，那么他希望用户从其中选择一个而不是输入“Jab”并提交。 - Raja

不，我说的是自动完成，这意味着允许输入。但是输入必须限制在自动完成列表中的项之内。组合框示例正是如此做的。 - JK.

组合框的功能是完美的，但界面很糟糕 - 它看起来与标准的<select>非常不同，所以我不能使用它。我会更详细地查看示例，看看是否可以省略下拉按钮。 - JK.

我误解了他的意图。为了撤回我的踩，我对这个答案进行了无关的编辑。 - Chad Birch

Answer 3

一种方法是在表单提交时（如果您正在使用表单），使用额外的验证来突出显示错误，如果文本不是有效选项之一。

另一种方法是附加到自动完成的更改事件，即使未选择选项也会触发该事件。然后，您可以进行验证以确保用户输入在您的列表中，或者如果不在，则显示错误。

- Aaron Janes

---

我选择使用.change()事件，这比尝试更改组合框解决方案以适应要求更容易和更快。 - JK.

@Neils在下面指出了另一个答案，它非常有效。更改：function(event,ui){if(ui.item==null){$("#your_input_box").val('');$("#your_input_box").focus();}} - Sandeep

Answer 4

旧问题，但在这里：

    var defaultVal = '';
    $('#selector').autocomplete({
        source: url,
        minlength: 2,
        focus: function(event, ui) {
            if (ui != null) {
                defaultVal = ui.item.label;
            }
        },
        close: function(event, ui) {
            $('#searchBox').val(defaultVal);
        }
    });

- Joe

Answer 5

我使用了combobox模块，它提供了一个“向下箭头”按钮。然后，在输入标签中，只需在输入标签的第41行左右添加以下内容（取决于您的combobox版本http://jqueryui.com/demos/autocomplete/#combobox）

input.attr("readonly", "readonly");

然后添加代码，以便如果用户点击输入框，它将显示下拉列表。

对于我的目的，我添加了一个只读标志，可以传递给模块，因此如果我需要只读，我也可以打开/关闭它。

- Mike

Answer 6

如果你想限制用户只能从自动完成列表中选择推荐项，可以尝试像这样定义 close 函数。当结果下拉框关闭时，会调用 close 函数，如果用户从列表中选取了选项，则 event.currentTarget 会被定义，否则，结果下拉框关闭时，用户没有选择选项。如果他们没有选择选项，那么我将输入重置为空白。

/**
 * The jQuery UI plugin autocomplete
 */
$.widget( "ui.autocomplete", $.ui.autocomplete, {
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });

- user7793758

---

虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议原因。 - nircraft

在这个特定的例子中，我扩展了自动完成UI小部件以此方式来表现，这样我就不必修复它在我的应用程序中出现的每个地方。如果你只有几个，那么只需定义关闭函数，不要费心扩展小部件。 - user7793758

Answer 7

如果您使用的是固定列表，那么组合框选项将很好地工作，但是如果您通过JSON获取动态生成的列表，则只能在更改时捕获数据。

下面是带有附加参数的完整示例。

        $("#town").autocomplete(
        {       
            select: function( event, ui ) {
                $( "#town" ).val( ui.item.value );
                return false;
            },        
            focus: function( event, ui ) {
                    $( "#town" ).val( ui.item.label );
                    return false;
                },           
            change: function(event, ui) {
                if (!ui.item) {
                    $("#town").val("");
                }
            },
            source: function(request, response) {
                $.ajax({
                    url: 'urltoscript.php',
                    dataType: "json",
                    data: {
                        term : request.term,
                        country : $("#abox").val()    // extra parameters
                    },                        
                    success: function(data) {
                        response($.map(data,function (item)
                        {                                
                            return {
                                id: item.id,
                                value: item.name
                            };
                        }));
                    }
                });
            },
            minLength: 3
            , highlightItem: true                                
        });

- PodTech.io