Question

I am using a JS method to assign the names of computer languages to data attribute of div
e.g

<div id="Languages" data-Languages=''></div>

and js code

var langs='["Perl", "PHP", "Python", "Ruby", "Scala", "C#"]';
$('#Languages').data('Languages', langs);

but when i type text in the textbox it gives me an error
Object Expected
i am using this line for autocomplete

$(function () { 
    $("#tags").autocomplete({ source: $('#Languages').data('Languages') }); 
}); 

it works totally fine when i make another variable and pass it as a source as implemented in jquery website

i want to handle it with div’s data attribute because in future i want to use JSON that fetches autocomplete data on page load and assign it to div data attribute.

sorry if that question sounds stupid, its my 2nd day with jquery and all that stuff.

Answer 1

problem is you are assigning data to div outside page ready function, when div is not actually been loaded on page. try below mentions code, it works fine for me.

$(function () { 
    var langs = ["Perl", "PHP", "Python", "Ruby", "Scala", "C#"];
    $('#locations').data('languages', langs);
    $("#tags").autocomplete({ 
       source: $('#locations').data('languages') }); 
});