New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global template for dropdown #69

Closed
ivan-ilinov opened this Issue Aug 24, 2015 · 12 comments

Comments

Projects
None yet
2 participants
@ivan-ilinov

ivan-ilinov commented Aug 24, 2015

How can i specify global template for dropdown?
For example: several sources in multicolumn (or table) layout.

<table>
<tr>
<td>{{list_from_source_1}}</td>
<td>{{list_from_source_2}}</td>
</tr>
</table>
@ivan-ilinov

This comment has been minimized.

ivan-ilinov commented Apr 5, 2016

Hi! You do not plan to implement this feature?

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

hey Ivan sry for the confusion, pretty sure what you are looking for can be acheived with css using width percentages for <li> instead of being 100% they could be 50% (and the last one 100%)

.typeahead__dropdown {
    width: 230px;
}

.typeahead__dropdown-item.conference-western,
.typeahead__dropdown-item.conference-eastern {
    width: 50%;
    display:inline-block;
}

hockey

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

or did you mean for the main item result dropdown? a similar result could be acheived using the same technique

@ivan-ilinov

This comment has been minimized.

ivan-ilinov commented Apr 5, 2016

I mean for the main item result dropdown.
And i want use HTML, not CSS only. Unfortunately, CSS is not enough for my problem.

@running-coder running-coder reopened this Apr 5, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

If I understand correctly, the search results needs to be displayed in 2 columns. The left column corresponds to your source.group1 and the right column to your source.group2?

@ivan-ilinov

This comment has been minimized.

ivan-ilinov commented Apr 5, 2016

Yes, but it's only for example.
In real i have difficult layout with many nested columns, photos, prices etc.
(Like an Mega Menu.)

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

similar to this display http://codepen.io/redfrost/pen/CvFpD? I am unfamiliar with mega menu. perhaps you can build me up a quick display so i get the visual representation of your desired end-result?

@ivan-ilinov

This comment has been minimized.

ivan-ilinov commented Apr 5, 2016

Similar to this:

example

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 5, 2016

Excellent, give me a couple days and I'll try to build a demo when I get the free time

@ivan-ilinov

This comment has been minimized.

ivan-ilinov commented Apr 5, 2016

Thank you!
Maybe real prototype will helpful for you: http://www.labirint.ru/

@running-coder running-coder added this to the 2.6.0 milestone Apr 8, 2016

running-coder pushed a commit that referenced this issue Apr 13, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 13, 2016

I've added options.groupTemplate on the develop branch, I still have a few cases to test but the configuration is the following:

// Hardcoded group definition (loosing the groupOrder option)
groupTemplate: '<table><tr><td>{{group_name_1}}</td><td>{{group_name_2}}</td><td>{{group_name_3}}</td></tr></table>',

// Dynamic group building & ordering with groupOrder (if enabled)
// <ul><li> elements are still built but located inside each group's <td>
// keyword "{{group}}" must be written as-is
groupTemplate: '<table><tr><td>{{group}}</td></tr></table>',

let me know if any issue

@running-coder

This comment has been minimized.

Owner

running-coder commented Apr 13, 2016

I've just noticed the navigation is not working (arrows up + down), will set that tomorrow

running-coder pushed a commit that referenced this issue Apr 13, 2016

running-coder pushed a commit that referenced this issue Apr 15, 2016

running-coder added a commit that referenced this issue Apr 17, 2016

running-coder added a commit that referenced this issue Apr 22, 2016

Version 2.6.0
*Breaking change*
- Update Typeahead source option: source.group.url.url has been replaced by source.group.ajax.url

Features
- #69, #179 Added groupTemplate option
- #183 Allow Typeahead to search for deep source object keys

Fixes
- #149 Support for Mobiles
- #181 IE8 incompatibility
- #182 Fixed double form submit when the "Enter" key is pressed & fixed JS error when searching for an undefined or numeric value
- #184 Invalid encoded characters on dynamic requests for `{{query}}`

Notes
- Reworked the source.group options, url has been replaced by ajax
- Removed the source.group.ignore option, use source.group.filter instead
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment