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

Question

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

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

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

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

我已经完成了前一个插件的许多实现和一些相当定制的 UI 插件实现。

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

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 事件绑定到自动完成元素。注释掉的行使用下拉列表中第一个元素的值并设置输入的文本。如果这就是我所需要的，这将起作用，但我需要复制选择事件，这意味着我需要更多数据（不仅仅是文本）。

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