jquery - 自动完成不允许自由文本输入？

Question

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

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

我在演示/文档中没有看到任何描述如何执行此操作的内容。

我正在使用这样的自动完成功能

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

score 90 · Accepted Answer

根据API 文档，如果未从列表中选择条目，则change事件的ui属性为 null，因此您可以像这样简单地禁止自由文本：

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

score 10 · Accepted Answer

如果您希望用户只从列表中获取项目，请使用自动完成组合框。

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

高温高压

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

我使用了组合框模块，它为您提供了“向下箭头”按钮。然后到输入标签，只需将以下内容添加到第 41 行附近的输入标签（取决于您的组合框版本http://jqueryui.com/demos/autocomplete/#combobox）

input.attr("只读", "只读");

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

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

score 0 · Accepted Answer

老问题，但在这里：

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

score 0 · Accepted Answer

如果您想限制用户从自动完成列表中选择推荐，请尝试像这样定义关闭函数。当结果下拉关闭时调用 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("");
         }
      }
   }
 });

score -1 · Accepted Answer

如果您使用的是集合列表，则组合框选项效果很好，但是如果您有通过 json get 动态生成的列表，那么您只能捕获更改时的数据。

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

        $("#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                                
        });

jquery - 自动完成不允许自由文本输入？

7 回答 7

Related

Reference