Question

我正在尝试使用jQueryUI中的自动完成功能。我需要对后端进行数据调用，但除了来自request.term的值之外还有其他需要传递的参数，所以如果传递其他数据而不是使用其他方法，我想使用要做的data-属性。

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

因此，当我构建我的<input>时，我还会在其中放置data-属性的早午餐，我的想法是，当我需要执行自动完成调用时，我应该能够input.data() 1}}并抓住我需要的一切。

然而，我从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);
        }

        });

});

jQuery自动完成+数据属性在结果中返回uiAutocomplete

2 个答案: