Question

首先，我首先要说的是，我知道其他类似的问题，比如这个问题：

How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

但它并没有真正做到我所期望的。我将在下面解释原因。我也知道插件的原始开发者发布的这个简单指南：

http://www.learningjquery.com/2010/06/autocomplete-migration-guide

我已经完成了前一个插件的许多实现以及一些相当自定义的UI插件实现。

话虽如此，这是我的问题以及为什么第一个解决方案对我不起作用。 soruce来自JSON对象形式的DB。我使用自定义函数来设置选项，见下文：

source: function (request, response) {
   var sourceData = $.parseJSON(result); //result is an array coming in via ajax
   response($.map(sourceData, function (item) {
      return { label: item.PortName, value: item.PortName, source: item };
      //item has about 12 properties that could be used for other forms.
   }))
}

然后我还有一个自定义change()事件，它抓住上面的source，并执行一些操作，例如将项目本身存储在元素的data()对象中，以及解析item对象中的一些数据，以便在其他表单字段等中使用

上述解决方案仅将输入值设置为第一个自动完成选项，但不会复制自动完成的select或change事件。所以实际上不是真正的selectFirst或autoFill副本。

change函数如下所示：

change: function (event, ui) {
            if (ui.item) {
                $('input:[name="another_form_field"]').val(ui.item.source.PortId);
            }
            else {
                $(this).val('');
                $('input:[name="release_port_id"]').val('');
            }
        }

现在是一个快速，简单的mustMatch功能实现。一旦我实现了这两个功能，这很可能会改变。

好的，尽管如此，有关如何实现其中一个或两个功能的任何建议？我已尝试按照上述问题中的建议附加blur事件，但这不起作用。

提前感谢。

修改：这是我到目前为止所尝试的。将blur事件绑定到自动完成元素。注释掉的行使用下拉列表中第一个元素的值并设置输入的文本。如果这就是我所需要的，这将有效，但我需要复制select事件，这意味着我需要更多数据（而不仅仅是文本）。

.live('blur', function (e) {
        if ($('.ui-autocomplete li').length > 0) {            
            //$(this).val($(".ui-autocomplete li:visible:first").text());
            $(".ui-autocomplete li:visible:first").click();
        }
        else {
            $(this).val('');
            $('input:[name="release_port_id"]').val('');
        }
    });

此解决方案的另一个问题是，它实际上覆盖了自动完成中的change事件，并且未按预期执行。这就是我加入else部分的原因。这不是它的样子，而是一个概念证明。

Answer 1

我打算发布一笔赏金，但终于明白了。

这是我提出的解决方案。在玩完这个之后，我发现该插件使用.data()来存储选项项数据。所以我能够获得完整的对象并解析出我需要的数据以实现其他元素。然后挑战是识别选择何时有效，即使用户没有点击或选择一个选项。为此，我检查是否有任何选项与值匹配，如果我们复制select。否则我清除字段。然后我再次利用.data()存储选择是否有效，如果不是，我可以再次清除字段。以下是我的代码。

欢迎提出意见。

$('#autocomplete_input').autocomplete({
        source: function (request, response) {
            $.get("/DataHandler.ashx", { Type: "ExpectedType", Query: request.term }, function (result) {
                var sourceData = $.parseJSON(result);
                response($.map(sourceData, function (item) {
                    return { label: item.PortName, value: item.PortName, source: item };
                }))
            });
        },
        minLength: 3,
        change: function (event, ui) {
            if (ui.item) {
                $('#another_element"]').val(ui.item.source.PortId);
            }
            else {
                if (!$(this).data('valid')) {
                    $(this).val('');
                    $('#another_element').val('');                    
                }
            }
            $(this).data('valid', false);
        }
    }).live('blur', function (e) {
        if ($('.ui-autocomplete li:visible').length > 0) {
            item = $($(".ui-autocomplete li:visible:first").data()).attr('item.autocomplete');
            $(this).val(item.label);
            $('#another_element').val(item.source.PortId);
            $(this).data('valid', true);
        }
    });

如何实现jQuery UI自动完成'autoFill'和/或'selectFirst'功能？

1 个答案: