Sorting when display key value is null.

[mthorzen]

Hello again!

I stumbled upon another problem. I'm having several sources and display keys. The problem was that in my ajax JSON sometimes the display key was null.

$.typeahead({
        input: '#js-typeahead-search',
        minLength: 1,
        maxItem: 16,
        order: "asc",
        hint: false,
        cache: false,
        ttl: 15000,
        delay: 500,
        group: {
            template: "{{group}}"
        },
        maxItemPerGroup: 4,
        backdrop: {
            "background-color": "#fff"
        },
        href: function (item) {
            return "/{{group|slugify}}/{{id|slugify}}";
        },
        template: "{{name}}",
        emptyTemplate: translations['HEADER.NO_RESULTS'] + '"{{query}}"',
        dynamic: true,
        source: {
            "clients": {
                ajax: {
                    url: "http://localhost:9000/search/{{query}}",
                    path: "clients",
                    beforeSend: function (jqXHR, options) {
                        beforeSendToken(jqXHR);
                    },
                },
                template: function (query, item) {
                    if (item.legalName) {
                        return markSearchHit(item.name + ' (' + item.legalName + ')', query, false);
                    } else {
                        return markSearchHit(item.name, query, false);
                    }
                },
                display: ["name","legalName"],
            },
            "providers": {
                ajax: {
                    url: "http://localhost:9000/search/{{query}}",
                    path: "providers",
                    beforeSend: function (jqXHR, options) {
                        beforeSendToken(jqXHR);
                    },
                },
                template: function (query, item) {
                    if (item.legalName) {
                        return markSearchHit(item.name + ' (' + item.legalName + ')', query, false);
                    } else {
                        return markSearchHit(item.name, query, false);
                    }
                },
                display: ["name","legalName"],
            },
            "invoices": {
                ajax: {
                    url: "http://localhost:9000/search/{{query}}",
                    path: "invoices",
                    beforeSend: function (jqXHR, options) {
                        beforeSendToken(jqXHR);
                    },
                },
                template: function (query, item) {
                    var resultStr = "";
                    if (item.invoiceNumber) {
                        resultStr = item.invoiceNumber + ': ' + item.customerName + ' < ' + item.supplierName;
                    } else {
                        resultStr = item.customerName + ' < ' + item.supplierName;
                    }
                    return markSearchHit(resultStr, query, false);
                },
                display: ["invoiceNumber", "supplierName", "customerName"]
            },
            "orders": {
                ajax: {
                    url: "http://localhost:9000/search/{{query}}",
                    path: "orders",
                    beforeSend: function (jqXHR, options) {
                        beforeSendToken(jqXHR);
                    },
                },
                template: function (query, item) {
                    var resultStr = "";
                    if (item.orderNumber) {
                        resultStr = item.orderNumber + ': ' + item.customerName + ' < ' + item.supplierName;
                    } else {
                        resultStr = item.customerName + ' < ' + item.supplierName;
                    }
                    return markSearchHit(resultStr, query, false);
                },
                display: ["orderNumber", "supplierName", "customerName"]
            },
            "pages": {
                data: [
                    {
                        id: 1,
                        pageName: translations['FOOTER.ABOUT_US']
                    },{
                        id: 2,
                        pageName: translations['FOOTER.PRICE']
                    },{
                        id: 3,
                        pageName: translations['FOOTER.CONTACT']
                    },{
                        id: 4,
                        pageName: translations['FOOTER.PRIVACY_POLICY']
                    },{
                        id: 5,
                        pageName: translations['FOOTER.CONDITIONS_OF_USE']
                    },{
                        id: 6,
                        pageName: translations['FOOTER.COOKIES_POLICY']
                    },{
                        id: 7,
                        pageName: translations['FOOTER.RETURN_POLICY']
                    },{
                        id: 8,
                        pageName: translations['SIDEBAR.DEMO']
                    },{
                        id: 9,
                        pageName: translations['SIDEBAR.INFO.WHAT_IS_QRECS']
                    },{
                        id: 10,
                        pageName: translations['SIDEBAR.INFO.ABOUT_US']
                    },{
                        id: 11,
                        pageName: translations['SIDEBAR.INFO.CONTACT']
                    },{
                        id: 12,
                        pageName: translations['SIDEBAR.INFO.PRICE']
                    }
                ],
                template: "{{pageName}}",
                display: ["pageName"]
            }
        },
        callback: {
            ...
        },
        debug: true
    });

In this case you can see that I have created a custom template to make a different view depending if invoiceNumber is null or not. In the Ajax response I got one element that had invoiceNumber null and this caused error message when trying to do a.toString().toUpperCase();.

[tombertrand]

Indeed that does happen when there is no defined template! Nice find again you are on a 🐛 killing spree!

Added some basic tests to ensure order keeps working in the future

[mthorzen]

Thanks! Glad to help.

Thanks for a great library!