Question

我正在使用typeahead将自动提示功能添加到wordpress搜索表单中。因此，我希望有两列，第1列 - ＆gt; Posttype Post，第2栏 - ＆gt; Posttype页面分隔，如hr，后跟posttype媒体。

我正在使用三个数据集（每个帖子类型都有一个唯一的数据集），因此前端呈现3“tt-dataset”。当我使用基础时，我需要在数据集之前添加div class =“row”，在“tt-dataset”类之后添加“large-6 column”，并在每个“tt-dataset”之后添加一个结束aa关闭该行的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>

预先输入多列

0 个答案: