Question

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

如何在jQuery UI自动完成中实现“mustMatch”和“selectFirst”

but it doesnt really do what I would expect. I ll explain why below. I am also aware of this simple guide posted by the original developer of the plugin:

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

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

Having said that, here is my issue and why the first solution does not work for me. The soruce comes from a DB in the form of JSON objects. I use a custom function to set the options, see below:

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（）事件，该事件获取上面的源，并执行一些操作，如将项本身存储在元素的>数据（）对象中，以及解析项对象中的一些数据以用于其他表单字段等。

上述解决方案仅将输入值设置为第一个自动完成选项，但不会复制自动完成的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功能的一个快速、简单的实现。一旦我实现了这两个功能，这种情况很可能会改变。

好的，说到这里，关于如何实现这两个功能中的一个或两个，有什么建议吗？我已经尝试按照上面的问题中的建议附加一个＜code＞blur＜/code＞事件，但这不起作用。

提前谢谢。

EDIT: This is what I have tried so far. Binding a blur event to the autocomplete element. The commented-out line uses the value of the first element in the dropdown and sets the text of the input. This would work if thats all I would need, but i need to replicate the select event, which means that i need more data (not just the text).

.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（）来存储选项项数据。因此，我能够获得完整的对象，并解析出实现其他元素所需的数据。然后，即使用户没有点击或选择某个选项，也要识别选择何时有效。为此，我检查是否有任何选项与值匹配，如果匹配，我复制选择。否则我会清理田地。然后，我再次使用.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);
        }
    });

友情链接