correlativeTemplate: true not working as expected

[chris-shorter]

Hello, I hope you can help, I'm having issues with correlativeTemplate: true with ajax and a template function.

If I type a word from tag1 and a word from tag2 (on the same result) I get no results. - eg for below, search "lorem dolor"

Also is it possible to have tags just be an array of any number of tags? (at first I had it this way, and I thought that was why it didn't work, so I split it into tag1, tag2 etc)

Here is my code.

$.typeahead({
        input: '#keyword-search',
        hint: true,
        highlight: false,
        cache: true,
        emptyTemplate: function (query) {
            if (query.length > 0) {
                return 'No results found for "' + query + '"';
            }
        },
        correlativeTemplate: true,
        maxItem: 0,
        source: {
            Products: {
                display: ["search_tags","subtitle","tag0","tag1","tag2"],
                template: function (query, item) {
                    var template =
                        '<span class="title">';
                        if(item.is_rental) {
                            template += '<span>Rental: </span>';
                        }
                        template += '{{title}}</span>' +
                        '<span class="subtitle">{{subtitle}}</span>';
                    return template;
                },
                href: '{{url}}',
                ajax: {
                    url: "/site/lib/return-products-json.php",
                }
            }
        }
    });

Here's some sample data from return-products-json.php

[
{
"title": "PRODUCT1",
"url": "/product1/",
"sku": "1003",
"subtitle": "Subtitle Example 1",
"is_rental": 0,
"tag0": ""
},
{
"title": "PRODUCT2",
"url": "/product2/",
"sku": "1002",
"subtitle": "Subtitle Example 2",
"is_rental": 0,
"tag0": ""
},
{
"title": "PRODUCT3",
"url": "/product3/",
"sku": "1001",
"subtitle": "Subtitle Example 3",
"is_rental": 0,
"tag0": "TEST1",
"tag1": "lorem ipsum",
"tag2": "dolor"
},
{
"title": "PRODUCT3",
"url": "/rentals/product3/",
"sku": "1001R",
"subtitle": "Subtitle Example 3",
"is_rental": 1,
"tag0": "TEST2"
}
]

If I look at the "compiled" result by examining item, its only using tag0, not tag1 or tag2. So for Product 3, "compiled" is:

compiled: "TEST1 Subtitle Example 3"

[tombertrand]

hey @chris-shorter , I'm able to get the desired result

could it be that you enabled cache: true? This is a very evil option when still being in dev

[chris-shorter]

Just to clarify this matches if you went on to type another tag (eg lorem dolor) or a combination of tag and subtitle (lorem subtitle)? I’ll have to try again tomorrow. I simplified my data in my example there may be some quirk I didn’t accurately recreate

[chris-shorter]

https://codepen.io/shorty2240/pen/VwYNNzN

So I definitely don't get results when I search for "lorem dolor" or "lorem subtitle" in this example - am I supposed to? Even "lorem ipsum dolor" which doesn't break up one term, does not match.

[tombertrand]

should definitly match, I'll have a look shortly

[chris-shorter]

I have noticed something that might help. If I use the parameter in the template (eg {{tag1}} {{tag2}} etc) then they are correctly added to "compiled" and it works as expected. As a temp fix I can just include these and hide them with CSS, but I think that might be the nature of the issue?

[tombertrand]

So, I've completly forgot that an alternative for your problem was implemented in #109, you are able to manually set the compiled keys in the correlativeTemplate option. Using your example I'm getting the desired result with:

correlativeTemplate: ["search_tags","subtitle","tag0","tag1","tag2"]

Here is the source: https://github.com/running-coder/jquery-typeahead/blob/master/src/jquery.typeahead.js#L1404