Assign Div data attribute as Data Source to JQuery AutoComplete

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.

charlietfl · Accepted Answer · 2013-01-15 09:04:28Z

4

Not sure if this is your problem exactly but you have single quotes around your array, making it a string.

it should be:

var langs = ["Perl", "PHP", "Python", "Ruby", "Scala", "C#"];

edited Jan 15, 2013 at 9:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

answered Jan 15, 2013 at 9:03

Ruby Rhod

413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

definitely the problem, data needs to be an array

Atif Imtiaz Over a year ago

i've made the change now. but still the same error "Object Expected" :|

Rahul · Accepted Answer · 2013-01-15 09:04:44Z

4

your langs is like '' which makes it a string. you need an array which behaves like a source for autocomplete. Also there is a mismatch in id and key of data you are trying. try this

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

answered Jan 15, 2013 at 9:04

Rahul

9885 silver badges10 bronze badges

Comments

Rahul · Accepted Answer · 2013-01-15 09:23:43Z

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') }); 
});

answered Jan 15, 2013 at 9:23

Rahul

9885 silver badges10 bronze badges

5 Comments

Rahul Over a year ago

btw why are you puting your array in data when you can use it directly. like $("#tags").autocomplete({ source: langs });

Atif Imtiaz Over a year ago

man basically there is a thing i want to clear, that i am using a javascript funtion that calls on "body onload" event, and then that method is assigning the data source to the div, your code is fine and works for me but please make me clear that where should i bind the data source to the div? on load or somewhere else?

Atif Imtiaz Over a year ago

in future i will make my code work with json and retrieve all those tags from server side

Rahul Over a year ago

well when you write code under $(function(){}); it makes sure your DOM has been loaded and can be used but when you use your DOM outside this function, that means its not been loaded hence assigning data to it won't work. you should always bind data source to div or any other operation with div in onload function only.

Atif Imtiaz Over a year ago

very nice explanation, i thank you for your time and consideration

Razmig · Accepted Answer · 2013-01-15 10:13:29Z

1

This is not much different from @Rahul solution.

but maybe you want to read directly from the data attribute:

var langs = ["Perl", "PHP", "Python", "Ruby", "Scala", "C#"];

$('#locations').attr('data-Languages', langs);

$(function () { $("#tags").autocomplete({ 
    source: $('#locations').data('languages').split(',')}); 
});

working example: http://jsbin.com/oyusub/4/

answered Jan 15, 2013 at 10:13

Razmig

6491 gold badge5 silver badges10 bronze badges

Collectives™ on Stack Overflow

Assign Div data attribute as Data Source to JQuery AutoComplete

4 Answers 4

2 Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related