填充包含javascript变量的HTML表，然后将该HTML变量作为typeahead结果返回

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

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

---

以下是我的工作

因为您的HTML超出了函数

建议的范围

变量

HTML

无法看到名为

数据的变量

解决这个问题的一种方法是创建一个函数，该函数将数据变量作为参数，然后返回一个包含数据的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>'
};

---

下面是一个如何做到这一点的示例：

是的，当我动态生成密钥时，它再次起作用，而不是给我未定义的数据，当我定义列的密钥名时，它再次起作用。它很好。herre是我的更新

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

 obj[key];

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

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