将Div数据属性作为数据源分配给JQuery AutoComplete

本文关键字：分配 JQuery AutoComplete 数据源 Div 数据属性 | 更新日期: 2023-09-27 17:53:41

我使用JS方法将计算机语言的名称分配给div的数据属性如

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

和js代码

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

但是当我在文本框中输入文本时，它给了我一个错误对象预期我使用这一行来自动完成

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

当我在jquery网站

中创建另一个变量并将其作为源代码传递时，它完全可以工作。

我想用div的数据属性来处理它，因为在将来我想使用JSON来获取页面加载上的自动完成数据并将其分配给div数据属性。

抱歉，如果这个问题听起来很愚蠢，这是我第2天与jquery和所有的东西。

将Div数据属性作为数据源分配给JQuery AutoComplete

不确定这是否是您的问题，但您在数组周围有单引号，使其成为字符串。

应该是:

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

你的lang就像"这使它成为一个字符串。你需要一个像自动完成源一样的数组。此外，您正在尝试的数据的id和key不匹配。试试这个

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

问题是您正在将数据分配给页面准备函数之外的div，当div实际上没有加载在页面上时。试试下面提到的代码，它对我来说很好。

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

这与@Rahul的解决方案没有太大区别。

但是也许你想直接从data属性中读取:

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

工作示例:http://jsbin.com/oyusub/4/

相关文章：