Question

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

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

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

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

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

Answer 1

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

change: function(event, ui) {
    if (ui.item == null) {
        $("#your_input_box").val("");
        $("#your_input_box").focus();
    }
}

Answer 2

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

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

HTH

Answer 3

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

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

Answer 4

我使用了组合框模块，它给你一个＆＃34;向下箭头＆＃34;按钮。然后到输入标记，只需将以下内容添加到第41行的输入标记（取决于您的组合框版本http://jqueryui.com/demos/autocomplete/#combobox）

input.attr（＆＃34; readonly＆＃34;，＆＃34; readonly＆＃34;）;

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

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

Answer 5

老问题，但在这里：

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

Answer 6

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

Answer 7

如果使用集合列表，组合框选项可以正常工作，但是如果通过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                                
        });

Answer 8

mustMatch选项怎么样？

'如果设置为true，则自动完成程序将仅允许后端显示的结果。请注意，非法值会导致输入框为空。'

自动完成禁止免费文本输入？

8 个答案: