Autocomplete 在多列前键入

我正在使用typeahead向wordpress搜索表单添加自动建议功能。因此，我希望有两列，第1列->Posttype Post，第2列->Posttype页面分离，就像hr一样，然后是Posttype media

我使用三个数据集（对于每个posttype，都有一个唯一的数据集），因此前端呈现3个“tt数据集”。在使用基础时，我需要在数据集之前添加一个div类=“行”，在“TT DataSet”类之后添加一个“大六列”，并在每个“TT DataSet”之后添加一个闭包，以及一个行的关闭div。 我想我可以使用JS添加这些类，但我感觉不对。有没有我缺少的现成解决方案？谢谢你们

到目前为止，我的代码都是硬编码的，因为我现在正在进行原型设计

<script  type="text/javascript" src="typeahead.bundle.js"></script>
<script type="text/javascript">
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var posts = new Array();
posts[0] = new Object();
posts[0]["name"] = "test Name";
posts[0]["url"] = "http://www.google.com";
posts[0]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[0]["tokens"] = "Post", "Thumbnail", "test";
posts[1] = new Object();
posts[1]["name"] = "test Name2";
posts[1]["url"] = "http://www.bing.com";
posts[1]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[1]["tokens"] = "Post", "Thumbnail", "test";
posts[2] = new Object();
posts[2]["name"] = "test Name3";
posts[2]["url"] = "http://www.yahoo.com";
posts[2]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[2]["tokens"] = "Post", "Thumbnail", "test";
posts[3] = new Object();
posts[3]["name"] = "test Name4";
posts[3]["url"] = "http://www.google.com";
posts[3]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[3]["tokens"] = "Post", "Thumbnail", "test";
posts[4] = new Object();
posts[4]["name"] = "test Name5";
posts[4]["url"] = "http://www.bing.com";
posts[4]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[4]["tokens"] = ['Post', 'Thumbnail', 'test'];
posts[5] = new Object();
posts[5]["name"] = "test Name6";
posts[5]["url"] = "http://www.yahoo.com";
posts[5]["image"] = "https://placeholdit.imgix.net/~text?txtsize=19&txt=the_post_thumbnail%28%29&w=450&h=250&txttrack=0";
posts[5]["tokens"] = ['Post', 'Thumbnail', 'test'];
console.log(posts);

var pages = new Array();
pages[0] = new Object();
pages[0]["name"] = "Page 1";
pages[0]["url"] = "http://www.google.com";
pages[0]["tokens"] = "Impressum", "Imprint";
pages[1] = new Object();
pages[1]["name"] = "Page 2";
pages[1]["url"] = "http://www.bing.com";
pages[1]["tokens"] = "Datenschutz";
pages[2] = new Object();
pages[2]["name"] = "Page 3";
pages[2]["url"] = "http://www.yahoo.com";
pages[2]["tokens"] = "AGB";
pages[3] = new Object();
pages[3]["name"] = "Page 4";
pages[3]["url"] = "http://www.google.com";
pages[3]["tokens"] = "Kontakt", "contact";

var cpts = new Array();
cpts[0] = new Object();
cpts[0]["name"] = "CPT 1";
cpts[0]["url"] = "http://www.google.com";
cpts[0]["tokens"] = "John", "Doe";
cpts[1] = new Object();
cpts[1]["name"] = "CPT 2";
cpts[1]["url"] = "http://www.bing.com";
cpts[1]["tokens"] = "Jane", "Doe";
cpts[2] = new Object();
cpts[2]["name"] = "CPT 3";
cpts[2]["url"] = "http://www.yahoo.com";
cpts[2]["tokens"] = "Max", "Muster";
cpts[3] = new Object();
cpts[3]["name"] = "CPT 4";
cpts[3]["url"] = "http://www.google.com";
cpts[3]["tokens"] = "Marianne", "Muster";



$('.typeahead').typeahead({
    hint: true,
    highlight: "any",
    minLength: 0,
    maxItem: 15,
    maxItemPerGroup: 2,
    searchOnFocus: true,
    matcher: function () { return true; },
},
{
    name: 'posts',
    source: substringMatcher(posts),
    display: ['tokens','name','url'],   
    templates: {
        empty: [
            '<div class="empty-message">',
                'Zu Ihrer Suchanfrage konnten leider keine Treffer gefunden werden.',
            '</div>'
        ].join('\n'),
        footer : [
            '<div class="see-all-results">',
                '<a href="#">Alle Ergebnisse <i class="fa fa-chevron-right"></i></a>',
            '<div>'
        ].join('\n'),
        header : [
            '<strong>Beiträge</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<div class="headline-pic" style="background-image: url(&quot;' + data.image + '&quot;); background-size: cover;"><a href="' + data.url + '">' + data.name + '</a></div>';

        }
    }
},
{
    name: 'pages',
    source: substringMatcher(pages),
    templates: {
        header : [
            '<strong>Seiten</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<a href="' + data.url + '">' + data.name + '</a><br />';
        }
    }
}
{
    name: 'customs',
    source: substringMatcher(cpts),
    templates: {
        header : [
            '<strong>Mitarbeiter</strong>'
        ].join('\n'),
        suggestion: function(data) {
            return '<a href="' + data.url + '">' + data.name + '</a><br />';
        }
    }
});
</script>

var substringMatcher=函数（strs）{
返回函数findMatches（q，cb）{
var匹配，substringRegex；
//将填充子字符串匹配项的数组
匹配项=[]；
//用于确定字符串是否包含子字符串'q'的正则表达式`
substregex=新的RegExp（q，‘i’）；
//在字符串池中迭代并查找
//包含子字符串'q'，将其添加到'matches'数组中
$。每个（str，功能（i，str）{
if（子相关性测试（str））{
匹配。推（str）；
}
});
cb（比赛）；
};
};
var posts=新数组（）；
posts[0]=新对象（）；
发布[0][“名称”]=“测试名称”；
发布[0][“url”]=”http://www.google.com";
发布[0][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
发布[0][“令牌”]=“发布”、“缩略图”、“测试”；
posts[1]=新对象（）；
发布[1][“名称”]=“测试名称2”；
发布[1][“url”]=”http://www.bing.com";
发布[1][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
posts[1][“tokens”]=“Post”、“缩略图”、“测试”；
posts[2]=新对象（）；
发布[2][“名称”]=“测试名称3”；
发布[2][“url”]=”http://www.yahoo.com";
发布[2][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
posts[2][“tokens”]=“Post”、“缩略图”、“测试”；
posts[3]=新对象（）；
发布[3][“名称”]=“测试名称4”；
发布[3][“url”]=”http://www.google.com";
贴子[3][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
发布[3][“令牌”]=“发布”、“缩略图”、“测试”；
posts[4]=新对象（）；
发布[4][“名称”]=“测试名称5”；
发布[4][“url”]=”http://www.bing.com";
贴子[4][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
贴子[4][“令牌”]=“贴子”、“缩略图”、“测试”]；
posts[5]=新对象（）；
发布[5][“名称”]=“测试名称6”；
发布[5][“url”]=”http://www.yahoo.com";
贴子[5][“图像”]=”https://placeholdit.imgix.net/~text？txtsize=19&txt=post\u缩略图%28%29&w=450&h=250&txtrack=0”；
贴子[5][“令牌”]=“贴子”、“缩略图”、“测试”]；
控制台日志（posts）；
var pages=新数组（）；
页面[0]=新对象（）；
页面[0][“名称”]=“第1页”；
页面[0][“url”]=”http://www.google.com";
页面[0][“标记”]=“印记”、“印记”；
pages[1]=新对象（）；
第[1]页[“名称”]=“第2页”；
页面[1][“url”]=”http://www.bing.com";
第[1]页[“令牌”]=“Datenschutz”；
pages[2]=新对象（）；
第[2]页[“名称”]=“第3页”；
页面[2][“url”]=”http://www.yahoo.com";
第[2]页[“代币”]=“AGB”；
第[3]页=新对象（）；
第[3]页[“名称”]=“第4页”；
页面[3][“url”]=”http://www.google.com";
第[3]页[“代币”]=“Kontakt”，“联系人”；
var cpts=新数组（）；
cpts[0]=新对象（）；
CPT[0][“名称”]=“CPT 1”；
cpts[0][“url”]=”http://www.google.com";
cpts[0][“代币”]=“约翰”、“多伊”；
cpts[1]=新对象（）；
cpts[1][“名称”]=“CPT 2”；
cpts[1][“url”]=”http://www.bing.com";
cpts[1][“代币”]=“简”、“Doe”；
cpts[2]=新对象（）；
cpts[2][“名称”]=“CPT 3”；
cpts[2][“url”]=”http://www.yahoo.com";
cpts[2][“令牌”]=“最大”、“集合”；
cpts[3]=新对象（）；
CPT[3][“名称”]=“CPT 4”；
cpts[3][“url”]=”http://www.google.com";
cpts[3][“代币”]=“玛丽安”、“集合”；
$（'.typeahead'）。typeahead({
提示：没错，
亮点：“任何”，
最小长度：0，
最大项目：15，
maxItemPerGroup:2，
searchOnFocus：没错，
matcher:function（）{return true；}，
},
{
姓名：'posts'，
来源：子字符串匹配器（posts），
显示：['tokens'、'name'、'url']，
模板：{
空的：[
'',
“我的父亲是雷德·基恩·特雷弗·格芬登·沃登。”，
''
].join（'\n'），
页脚：[
'',
'',
''
].join（'\n'），
标题：[
“贝特拉格”
].join（'\n'），
建议：功能（数据）{
返回“”；
}
}
},
{
名称：'pages'，
来源：子字符串匹配器（页），
模板：{
标题：[
“Seiten”
].join（'\n'），
建议：功能（数据）{
返回“
”；
}
}
}
{
名称:"海关",，
来源：子字符串匹配器（cpts），
模板：{
标题：[
“Mitarbeiter”
].join（'\n'），
建议：功能（数据）{
返回“
”；
}
}
});

您正在使用模板吗？你的html和js看起来像什么？数据是什么样子的？嗨@whipdancer谢谢你的快速回复，请原谅我的回答晚了。我已经添加了我的代码。这些源代码是硬编码的，因为我现在正在进行原型设计。你在使用模板吗？你的html和js看起来像什么？数据是什么样子的？嗨@whipdancer谢谢你的快速回复，请原谅我的回答晚了。我已经添加了我的代码。这些源代码都是硬编码的，因为我现在正在制作原型。