jQuery autocomplete + data attributes returned uiAutocomplete in the result

Question

I am trying to use the autocomplete from jQueryUI. I need to do a data call to the backend, but other than the value from request.term there are other parameters i need to pass as well, so instead of using some other means if passing the additional data, i thought of using the data- attributes to do it.

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

So when i build my <input> i also put a brunch of data- attributes in there, the idea is that when i need to do the autocomplete call, i should be able to just do input.data() and grab everything i need.

However, i am getting some weird behavior from jQuery's .data() call.

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");
        }); 
    },
    ...

In the above code, when i do $(this.element).data(), it does indeed returned my all the attributes that i defined, but it also included something else, such as the uiAutocomplete object...

I thought the .data call is supposed to return only the items with prefix data-? What is the best way to grab the data- attributes?

Answer 1

This is because jQuery uses data attribute to store plugins namespace data in it, the more plugin used in it, the more data namespaces you will get. This is not weird, this is how jQuery works. As it is said here -

Calling jQuery.data( element ) retrieves all of the element's associated values as a JavaScript object. Note that jQuery itself uses this method to store data for internal use, such as event handlers, so do not assume that it contains only data that your own code has stored.

Reference: https://api.jquery.com/jQuery.data/

As far as your solution, you should namespace your data if you wish to retrieve it later. Something like -

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

and then get it by -

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

Answer 2

In my observation the data method were returning the values set as below 1)setting the values

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

2) Getting the values

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

3)assigning the values to other control

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

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

Creating an Autocomplete sample

1)Created another page that returns a string of values used for autocomplete. 2)Made a Ajax request and retrieved the values into a local Array. 3)used the Array of values to Populating the AutoComplete.

4)incase of some widgets Make sure you are including the necessary jquery library and some related css into your page.

$(document).ready(function () {

    $.ajax({
        url: "AutoCompleteDataProvider.cshtml",

        success: function (data) {

            var autoCompleteValue = data.split(',');
            $(".autoCompleteInput").autocomplete({
                source: autoCompleteValue
            });
        },
        error: function (textStatus) {
            alert(textStatus);
        }

        });

});