自动完成功能不允许自由文本输入？

Question

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

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

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

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

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

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

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

Answer 2

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

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

HTH

Answer 3

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

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

Answer 4

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

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

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

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

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