CODEWITHSUNDEEP
javascripttypeahead.jstwitter-typeahead
Dakota Reese Brown
Dakota Reese Brown

Reputation: 63

Different Template for 1st TypeAhead.js Suggestion?

I have an implementation of TypeAhead.js that I'm trying to alter so that the first suggestion is presented slightly differently than all others.

Basically I want to present 2 category suggestions for the first suggestion, but not the rest.

Here's my snippet for parsing the JSON and formatting it.

$(document).ready(function() {        
    $('.typeahead-preview .typeahead').typeahead({
        name: 'search-terms',
        prefetch: 'search-terms.json',
        template: [
            '<dl><dt>{{value}}</dt><dd>{{value}} in {{category-1}}</dd><dd>{{value}} in {{category-2}}</dd></dl>'
        ].join(''),
        engine: Hogan
    });
});

Thank you.

Upvotes: 0

Views: 213

Answers (2)

hoverbikes
hoverbikes

Reputation: 435

For example I might want to display the {{category-1}} and {{category-2}} values for the first suggestion, but none of the rest.

What you are asking for is possible by doing what Stephen Thomas suggested, (my rep isn't high enough to comment on the same thread).

In your template, put a class on the things to hide:

<dl><dt>{{value}}</dt><dd class="usually_hidden">{{value}} in {{category-1}}</dd><dd class="usually_hidden>{{value}} in {{category-2}}</dd></dl>

And then in your CSS:

.usually_hidden {
    display: none;
}
.tt-suggestion:first-child .usually_hidden {
    display: inline;
}

Upvotes: 0

Stephen Thomas
Stephen Thomas

Reputation: 14053

Since Typeahead.js presents its suggestions as <div> elements of class tt-suggestion, all within a containing <span> with class tt-suggestions you could use standard CSS to style the first suggestion uniquely, e.g.:

    .tt-suggestion {
        /* styles for regular suggestions */
    }

    .tt-suggestion:first-child {
        /* additional or replacement styles for first suggestion */
    }

Upvotes: 1

Related Questions