如何在 $( ".type" )中为特定行 ID 传递 $( ".type" ).val() .autocomplete()

Question

我正在抓取产品类型与以下代码这是完美的工作。我的问题是有多个.type。我想为一个特定的.type调用代码。类型为.row' and each的父div .row has unique row id. I would like to pass $(".type").val()对于特定的.row id

如何做到这一点。

        $(function() {
            function log(message) {
                $("<div>").text(message).prependTo("#log");
                $("#log").scrollTop(0);
            }
            $(".type").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "autoProductType",
                        dataType: "json",
                        data: {
                            str: $(".type").val(),// This value
                            maxRows: 5
                        },
                        success: function(data) {
                            response($.map(data.productTypeList, function(item) {
                                console.log(item);
                                return {
                                    label: item.productType,
                                    value: item.productType,
                                    id: item.productTypeId
                                };
                            }));
                        },
                        error: function(data) {
                            alert(data.productTypeList);
                            console.log(typeof data);
                            console.log(data);
                            alert('error');
                        }
                    });
                },
                minLength: 1,
                select: function(event, ui) {
                    log(ui.item ?
                            "Selected: " + ui.item.label :
                            "Nothing selected, input was " + this.value);
                    var pid = $(this).parents('.row').attr('id');
                    $("#" + pid + " .typeId").val(ui.item.id);
                },
                open: function() {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function() {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });
    </script>

编辑:我正在尝试以下，但这也不起作用

 function get_row_dtl() {
            var pid = $(this).parents('.row').attr('id');
            var val = $('#' + pid + ' .type').val();
            return val;
        }

在自动完成

str: get_row_dtl(),

**编辑:**请参见这里的小提琴。这里我在类型上创建自动补全。我的自动完成是第一类工作正常(显示所有产品类型在这里)。但是对于第二，第三和下一个，它不显示所有的产品列表，它只显示已选择在第一个。所以我想在第2页显示所有产品列表(自动完成)然后在下一页输入

Answer 1

试试这个

用request.term代替$(".type").val()

从http://api.jqueryui.com/autocomplete/option-source

Function:第三种变体是回调，它提供了最大的灵活性，可用于将任何数据源连接到自动完成。这个回调函数有两个参数:

• 一个请求对象，具有单个term属性，它引用文本输入中的当前值。例如，如果用户在城市字段中输入"new yo"，则自动完成项将等于"new yo"。
• 一个响应回调，它期望一个参数:建议给用户的数据。应该根据提供的术语对该数据进行过滤，并且可以采用上述简单本地数据的任何格式。在提供自定义源回调以处理请求期间的错误时，这一点非常重要。即使遇到错误，也必须始终调用响应回调。这确保了小部件始终具有正确的状态。

Answer 2

请将get_row_dtl()函数更改为

function get_row_dtl() {
    var $el= $(':focus');
    var pid = $el.parents('.row').attr('id');
    var val = $('#' + pid + ' .type').val();
    return val;
        }

$(':焦点');用于获得聚焦元素。因此，任何与outocomplete键合的元素都是聚焦的。这条线会给你参考，你会得到想要的结果。我已经检查过了，它正在工作。