javascript - 填充具有 javascript 变量的 HTML 表，然后将该 HTML 变量作为预输入结果返回

Question

我在输入上使用 typeahead 来发送建议.. 一切正常但我知道我想动态创建 HTML 表并在表中分配值所以在我的 java 脚本中我声明 HTML 变量来存储表而不是我在返回值时使用这个变量。当我将 html 保存在一个变量中时，问题就出现了，它开始给出我的变量未定义的错误，当我把它放在引号中而不是返回时，它只显示变量。 .. 我不知道该做什么或我应该使用哪种方法，但我被困在这一点上，这是我的 HTML 工作

 <input class="typeahead" placeholder="Enter to Search" />

这是我的 javascript 工作

 var jsonData = [{
country: "Holland",
city: "Amsterdam"
}, {
country: "Belgium",
city: "Brussel"
}, {
country: "Germany",
city: "Berlin"
}, {
country: "France",
    "city": "Paris"
}];

var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country', 'city'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: jsonData

});

dataSource.initialize();
var html='<div><table width="100%" border="1"><tr><td width="50%" align="right">\'+data.country+\'</td><td width="50%">' + 'data.city' + '</td></tr></table></div>';

$('.typeahead').typeahead({
minLength: 1,
highlight: true
}, {
name: 'countries',
display: function(item){ return item.country+'–'+item.city},
source: dataSource.ttAdapter(),
templates: {
    empty: [
        '<div class="empty">No Matches Found</div>'].join('\n'),
            header: '<div><h5><table width="100%" border="1"><thead><tr><th width="50%" align="center">Item Name</th><th width="50%" align="center">City Name</td></th></table></h5></div>', 
    suggestion: function (data) {
        return html
    }
  }
  }); 

这是我的作品 jsfiddle链接

任何建议...？ ？ ？

更新1

现在我可以动态生成 HTML 了……在您的建议的帮助下。所以现在我要在我更新的 fiddle 中动态生成数组键，但问题是当我动态生成时它给我未定义的结果，当我硬编码数组键时它返回我所需的真实值看一看在我的 Updated fiddle 下面是我的 javascript 代码

 var jsonData = [{ 
 a: "Holland",
b: "Amsterdam"
}, {
a: "Holland",
b: "Amsterdam"
}, {
a: "Holland",
b: "Amsterdam"
}, {
a: "Holland",
b: "Amsterdam"
}, {
a: "Belgium",
b: "Brussel"
}, {
a: "Germany",
b: "Berlin"
}, {
a: "France",
b: "Paris"
}];

 var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('a', 'b'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: jsonData

 });

dataSource.initialize();

var generateHTML= function(data) {
var key='a';
var html='<div><table width="100%" border="1"><tr>';
for(var i=0; i<2; i++)
{
html+='<td width="50%" align="right">' + data. key + '</td>';
  //key++;
}
//'<td width="50%">' + data.city + '</td></tr></table></div>';
html+='</tr></table></div>';
return html;
//return '<div><table width="100%" border="1"><tr><td width="50%" align="right">' + data.country + '</td><td width="50%">' + data.city + '</td></tr></table></div>'
};

$('.typeahead').typeahead({
minLength: 1,
highlight: true
}, {
name: 'countries',
display: function(item){ return item.country+'–'+item.city},
source: dataSource.ttAdapter(),
templates: {
    empty: [
        '<div class="empty">No Matches Found</div>'].join('\n'),
            header: '<div><h5><table width="100%" border="1"><thead>    <tr><th width="50%" align="center">Item Name</th><th width="50%" align="center">City Name</td></th></table></h5></div>', 
    suggestion: function (data) {
        return generateHTML(data)
    }
  }
  });

更新 3 通过对 Javascript 数组对象进行 RND 完成的任务

感谢大家的帮助和建议。我能够成功地做到这一点。当我们通过对象调用 Java Script 数组时，我们必须按以下模式传递动态生成的键

 obj[key];

以下是我的工作JSFiddle Link

Answer 1

由于您的 HTML 超出了函数 suggestion 的范围，因此变量 html 看不到名为 data 的变量。

解决这个问题的一种方法是创建一个函数，该函数将数据变量作为参数，然后返回给您一个包含数据的 HTML。

var generateHTML= function(data) {
    return '<div><table width="100%" border="1"><tr><td width="50%" align="right">' + data.country + '</td><td width="50%">' + data.city + '</td></tr></table></div>'
};

然后在suggestion函数上调用这个函数:

$('.typeahead').typeahead({
    minLength: 1,
    highlight: true
}, {
    name: 'countries',
    display: function(item){ return item.country+'–'+item.city},
    source: dataSource.ttAdapter(),
    templates: {
        empty: [
            '<div class="empty">No Matches Found</div>'].join('\n'),
                header: '<div><h5><table width="100%" border="1"><thead><tr><th width="50%" align="center">Item Name</th><th width="50%" align="center">City Name</td></th></table></h5></div>', 
        suggestion: function (data) {
            return generateHTML(data)
        }
    }
});

这是一个如何做到这一点的例子:http://jsfiddle.net/59b62kz3/