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

[martijn1k]

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]

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.

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.

[martijn1k]

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]

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]

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]

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