jQuery自动完成 数据属性在结果中返回的uiautocomplete

Question

我正在尝试使用jqueryui的自动完成。我需要对后端进行数据调用，但是除了request.term的值以外，我还需要通过其他参数，因此，如果传递其他数据，我不用使用其他方法，而是考虑使用data-属性做。

var input = $(document.createElement("input"));
mydata.each(function() {
    input.attr('data-'+this.nodeName, this.innerHTML);
}); 

所以当我构建我的<input>时，我还在其中放了一系列data-属性，想法是当我需要进行自动完成呼叫时，我应该只能做input.data()并抓住我需要的一切。

但是，我从jQuery的.data()呼叫中获得了一些奇怪的行为。

input.autocomplete({
    source: function(req, resp) {
        $.ajax({
            url: $(this.element).attr('action'),
            dataType : 'json',
            data: $(this.element).data(),
            cache : false
        }).done(function(resp) {
            console.log(resp);
        }).fail(function() {
            alert("failed");
        }); 
    },
    ...

在上面的代码中，当我执行$(this.element).data()时，它确实返回了我定义的所有属性，但它也包含其他内容，例如uiAutocomplete对象...

我认为.data调用应该仅返回带有前缀data-的项目？获取data-属性的最佳方法是什么？

Answer 1

这是因为jQuery使用 data属性将插件名称空间数据存储在其中，它使用的插件越多，您将获得的数据名称空间就越多。这并不奇怪，这就是jQuery的工作方式。正如这里所说的 -

调用jquery.data（element）检索所有元素的 关联值作为JavaScript对象。请注意，jQuery本身使用 此方法存储数据以供内部使用，例如事件处理程序，因此 不要以为它仅包含您自己的代码的数据 存储。

参考：https://api.jquery.com/jquery.data/

就解决方案而言，如果您希望以后将其检索，则应命名数据。像 -

input.data('mydata', {name:'test'});

，然后通过 -

获得

var data = input.data('mydata');

Answer 2

在我的观察中，数据方法返回设置的值如下 1）设置值

    $(".autoCompleteInput").data("attribute1", "value1");
    $(".autoCompleteInput").data("attribute2", "value2");
    $(".autoCompleteInput").data("attribute3", 4);
    $(".autoCompleteInput").data("attribute4", 5);

2）获取值

    var datas = $(".autoCompleteInput").data();

3）将值分配给其他控件

    var stringData = JSON.stringify(datas);
    $(".DataDisplay").val(stringData );

http://api.jquery.com/data/

创建一个自动完成样本

1）创建了另一个页面，该页面返回用于自动完成的值的字符串。2）提出AJAX请求并将值检索到本地数组中。3）使用值数组来填充自动完成。

4）某些小部件的范围确保您在页面中包括必要的jQuery库和一些相关的CSS。

$(document).ready(function () {
    $.ajax({
        url: "AutoCompleteDataProvider.cshtml",
        success: function (data) {
            var autoCompleteValue = data.split(',');
            $(".autoCompleteInput").autocomplete({
                source: autoCompleteValue
            });
        },
        error: function (textStatus) {
            alert(textStatus);
        }
        });
});