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

fix: Allow `onLayoutBuiltBefore` to return a custom template, wrap `<li>` inside other `<ul>` or `<div>` #389

Closed
martijn1k opened this Issue Oct 27, 2017 · 5 comments

Comments

Projects
None yet
2 participants
@martijn1k

martijn1k commented Oct 27, 2017

Hey man, first of all... AWESOME plugin. It's really well written and documented.

However... I've been staring at the documentation for two days now, and I've been searching inside Github for a solution, but I cannot find it.

Is there a way to end up with:

<div class="typeahead__result">
      <div class="typeahead__list">
            <div class="row group">
                 <div class="col-md-3 typeahead__group">Group Name</div>
                 <div class="col-md-9 typeahead__items">
                        <ul>
                              <li class="typeahead__item">Item Stuff</li>
                        </ul>
                  </div>
            </div>
      </div>
</div>

I tried several things using template and groupTemplate but I always end up with 1 UL which holds the group names AND items for all groups, so there is no way to distinguish between different groups.

What I'm trying to achieve is a 2 column layout, column 1 holds nothing but the group name, column 2 holds the corresponding items so I can display them next to eachother when there is enough screen real estate.

Maybe I'm overthinking or missing something.
Hope you can give me some advice.

Thanks in advance.
And once again, great work!

@running-coder running-coder changed the title from Wrap <li> inside other UL or div to fix `onLayoutBuiltBefore`: Allow the return to be the custom template, wrap `<li>` inside other `<ul>` or `<div>` Oct 27, 2017

@running-coder running-coder changed the title from fix `onLayoutBuiltBefore`: Allow the return to be the custom template, wrap `<li>` inside other `<ul>` or `<div>` to fix: Allow `onLayoutBuiltBefore` to return a custom template, wrap `<li>` inside other `<ul>` or `<div>` Oct 27, 2017

running-coder added a commit that referenced this issue Oct 27, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Oct 27, 2017

Hey @martijn1k thanks for the kind words! I was able to acheive the desired result with a minor tweak to Typeahead using the beer_v1 demo. Make sure to update to the latest develop branch (until the next version is released) to get the Typeahead required change.

screen shot 2017-10-27 at 11 23 32 am

and this code snippet using the onLayoutBuiltBefore callback. You will want to add the required checks if the result is empty to not change the template or build a different one, etc... and of course add some more styles to fit your designs!

callback: {
    onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {
        var newResultHtmlList = $('<div />', {
            'class': 'typeahead__list'
        });

        resultHtmlList.find('li').each(function( index ) {
            if ($(this).hasClass('typeahead__group')) {
                newResultHtmlList.append('<div class="row group">\
                <div class="col-md-3 typeahead__group">' + $(this).text().trim() + '</div>\
                <div class="col-md-9 typeahead__items"><ul></ul></div>\
                </div>')
            } else {
                newResultHtmlList.find('.typeahead__items:last ul').append($(this));
            }
        });

        return newResultHtmlList;
    }
}

This callback allows you to do manipulation on the returned Typeahead html that will go in the result list.

@running-coder running-coder added this to the 2.10.5 milestone Oct 27, 2017

@martijn1k

This comment has been minimized.

martijn1k commented Oct 27, 2017

Hey, thanks a lot for your reply! I just tested the code, but I'm only getting back the group names.
The items are not shown, I thought I was doing something wrong, so I downloaded the demo beer v1 and tried the code in there, but it is doing the same.

So luckly I'm not going crazy ;) am I missing something the onLayoutBuiltBefore?
Is there a call to populate the list needed or something?

Hope to hear from you soon. Have a nice weekend

@running-coder

This comment has been minimized.

Owner

running-coder commented Oct 27, 2017

The reason why you would get only the group names is that you haven't picked up the commit cd225f4 on the develop branch.

https://jsfiddle.net/runningcoder/ros1wcoy/

@martijn1k

This comment has been minimized.

martijn1k commented Oct 28, 2017

Mr Bertrand... I'm sorry, missed the comment about the dev branch!
Just fetched it and it works beautifully. Thank you so much! You are awesome!

@running-coder

This comment has been minimized.

Owner

running-coder commented Oct 28, 2017

Np! glad it works let me know if you face any other issue

running-coder added a commit that referenced this issue Jul 19, 2018

Version 2.10.5
Features
- Feature #397 update data of a multiselect

Fixes
- Fix #389 Allow `onLayoutBuiltBefore` to return a custom template, wrap `<li>` inside other `<ul>` or `<div>`
- Fix #396 limitTemplate doesn't display unless emptyTemplate is defined
- Fix #408 Null values in query data causes a null value error.
- Fix #424 groupOrder array doesn't work when group is a string
- Fix #434 The item value in the onCancel function in undefined
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment