如何在 jQuery UI 自动完成中获取与活动输入相关的元素？

Question

我正在尝试通过 jQuery UI 自动完成传递自定义表单属性（类别）以用于产品搜索。该表单看起来像 <form id="BulkOrderForm" category="samplecategory"><input></input>...</form> 并包含使用自动完成脚本的输入。每个页面上可以有多个表单，因此我需要能够从包含活动输入字段的表单中获取类别值。

这是我的来源：

function autocomplete() {
    $("input.wcbulkorderproduct").autocomplete({
        element: function(){
            var element = $('form#BulkOrderForm').attr('category');
            return element;
        },
        source: function(request, response, element){
            $.ajax({
                url: WCBulkOrder.url+'?callback=?&action='+acs_action+'&_wpnonce='+WCBulkOrder.search_products_nonce,
                dataType: "json",
                data: {
                    term: request.term,
                    category: element
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    });
}

对如何实现这一点有任何想法吗？

Answer 1

如果我理解正确，您正在尝试在 ajax 请求中使用活动的 input 的父 form。这是实现这一目标的一种方法：

HTML：

<form data-category="form1">
    <input type="text" />
    <input type="text" />
</form>
<form data-category="formB">
    <input type="text" />
    <input type="text" />
</form>

JS：

$('form').each(function () {
    var category = $(this).data('category');

    $(this).find('input').autocomplete({
        source: function (request, response) {
            response([category]);
        }
    });
});

不要在从所有forms 中获取inputs 的包罗万象的选择器上使用自动完成，而是首先选择forms 本身。对于每一个，提取类别，然后选择所有子 inputs 并在该结果上调用自动完成。然后您可以在 ajax 调用中使用 category 变量 - 在示例中，我只是将它传递给回调以显示。

http://jsfiddle.net/Fw2QA/

Answer 2

我会给你另一个解决方案，你可以查找活动输入的父表单，并从中提取属性。因为我不知道您表单中的这个类别是否是动态的，或者您是否可以控制代码中涉及的所有过程，所以我会给您一个更通用的解决方案，尽管如果该属性是动态的“Turch " 解决方案比我的要好得多，让 jquery 的data 功能处理属性更改，如果它是静态的，那么您可以这样做：

function autocomplete() {
    var element = $("input.wcbulkorderproduct").autocomplete({
        source: function(request, response){
            $.ajax({
                url: WCBulkOrder.url+'?callback=?&action='+acs_action+'&_wpnonce='+WCBulkOrder.search_products_nonce,
                dataType: "json",
                data: {
                    term: request.term,
                    category: element
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    }).parents('form').first().attr('category'); 

    //chained call, sets autocomplete, grabs the parent form and the attribute
    //which is saved on the variable element, and is used on every call through
    //javascript context inheritance.
}

更新

一个小例子说明我的建议（由@Turch 提供> 谢谢），可以在here 找到。