如何实现jQuery UI Autocomplete'autoFill'和/或'selectFirst'功能? [英] How to implement jQuery UI Autocomplete 'autoFill' and/or 'selectFirst' features?

问题描述

首先，让我开始说，我知道其他类似的问题，例如这里的这个问题:

First, Let me start by saying thatI am aware of other similar questions, like this one here:

如何实现必须匹配"和"selectFirst"在jQuery UI自动完成中?

但是它并没有真正实现我的期望.我将在下面解释原因. 我也知道由插件的原始开发者发布的这个简单指南:

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插件的一些相当定制的实现.

and I have done many implementations of the former plugin and a few fairly customized implementations of the UI plugin.

话虽如此，这是我的问题，为什么第一个解决方案对我不起作用. 来源来自数据库，格式为JSON对象.我使用自定义函数设置选项，如下所示:

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()事件，该事件捕获上面的source，并执行一些操作，例如将项目本身存储在元素的data()对象中，以及从中解析一些数据. item对象要在其他表单字段等中使用.

Then I also have a custom change() event that grabs the source above, and does a few things like store the item itself in the data() object of the element, as well as parse some of the data from the item object to be used in other form fields, etc.

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

The solution above only sets the value of the input to the first autocomplete option, but it does not replicate the select or change event of the autocomplete. So in reality is not a true selectFirst or autoFill replica.

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功能的一种快速，简单的实现.一旦实现了这两个功能，这种情况很可能会改变.

which is a quick, simple, implementation of the mustMatch feature for now. This will most likely change once I have these 2 features implemented.

好了，尽管如此，关于如何实现这两个功能之一或全部有什么建议吗?我已经尝试按照上述问题中的建议附加一个blur事件，但这无法正常工作.

Ok, with all that said, any suggestions on how to implement either or both of these features? I have tried attaching a blur event as suggested in the question above, but that wont work.

提前谢谢.

编辑: 到目前为止，这是我尝试过的.将blur事件绑定到autocomplete元素.注释掉的行使用下拉菜单中第一个元素的值并设置输入文本.如果那是我所需要的，那将起作用，但是我需要复制select事件，这意味着我需要更多的数据(而不仅仅是文本).

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部分的原因.这并不完全是它的外观，而是概念的证明.

The other problem with this solution, is that it actually overrides the change event in the autocomplete and it does not execute as expected. Which is why I included the else section. This is not quite what it will look like, but a proof of concept.

推荐答案

我本打算发布赏金计划，但最终想出了办法.

I was going to post a bounty but finally figured it out.

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

Here is the solution I came up with. After playing around with this, I figured out that the plugin uses .data() to store the option item data. So I was able to get the full object and parse out the data that I needed to fulfill other elements. Then the challenge was to recognize when a selection was valid even if the user didnt click or select an option. For that I check to see if any options match the value, if they do I replicate the select. Otherwise I clear the fields. Then I leveraged the .data() again to store whether the choice was valid or not, and if it was not I was able to clear the fields again. Below is my code.

欢迎发表评论.

$('#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 Autocomplete'autoFill'和/或'selectFirst'功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！