填充具有javascript变量的超文本标记语言表，并将该超文本标记语言变量作为typefirst结果返回

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

这是我正在使用的JSFIDLE链接

有什么建议吗？

现在我可以动态生成HTML。在你的建议的帮助下。所以现在我要在更新的fiddle中动态生成数组键，但问题是当我动态生成数组键时，它会给出未定义的结果，当我硬编码数组键时，它会返回我所需的真实值。请查看我的更新的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)
    }
  }
  });

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

 obj[key];

下面是我正在使用的JSFIDLE链接

Answer 1

由于您的HTML不在函数suggestion的范围内，因此变量HTML无法看到名为data的变量。

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

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