Templates Empty - Example??

[dennisgaudenzi]

Hi there,

Great code here - love this typeahead. I have everything working, but just cannot for the life of me get the results to show the "no results found" message. This is what I am currently using:

    $('#q').typeahead({
        minLength: 2,
        maxItem: 8,
        order: "asc",
        backdrop: {
            "background-color": "#eaeaea"
        },
        delay: 300,
        source: {
            project: {
                url: [{
                    type: "POST",
                    url: "/json/locations.asp",
                    data: {
                        q: "{{query}}"
                    }
                }, "data.locations"],
                display: "locname",
                template: '<div>' +
                            '   <span class="lname">{{locname}}</span>' +
                            '   <span class="laddress">({{addr}})</span>' +
                            "</div>"
            },
        },
        templates: {
            empty: '<div class="empty-message">No matches.</div>'
        },
        callback: {
            onResult: function(node, query, obj, objCount) {
                var text = "";
                if (query !== "") {
                    text = objCount + ' elements matching "' + query + '"';
                }
                //$('#result-container').text(text);
            },
            onClick: function(node, a, obj, e) {
                alert(JSON.stringify(obj));
                alert(obj.id);
            }
        },
        debug: true
    });

I am not getting any errors, so maybe it is a CSS issue and the message is being hidden? The only other way I wanted to try was to append an item to the list that was NOT filtered out. Icould obviously add to the search results, but if the search criteria entered does not exist in "no results found" it does not show.

Sorry for the long question. Any help would be greatly appreciated! If this is a bug, please let me know a workaround. If not, are there any examples / demos with the empty template I can check out?

Thank you!

Dennis

[running-coder]

Hi dennis, thanks for the feedback!! Displaying a "no results" row is not part of the typeahead features (I'll note it for next version). However it is easy for you to implement it via the onResult callback like you started. Here are a couple things:

• Are you using a dynamic Typeahead? in that case a request will be sent to your url on every "input" event (keytyped, copy, paste, etc). For that to work you need to define dynamic: true. (not sure how you got it to work) By default it's set to false so only one request per group is sent to the server.
• the options templates.empty does not exist yet so you can remove it
• inside the onResult callback check for an not empty query and 0 objCount, if those conditions are met append a "no result row" using the same html structure you would get if there was 1 result (you might need to create a div ul li etc.)

Let me know if you got it to work or if you need further help.

Thanks

[dennisgaudenzi]

Ah, ok. Got it. I am not 100% live with data and had dynamic off for the time being. Will turn that back on for live testing. As for the append, is there a code example for that? I assume it would be the same HTML as the template I am using, just with hard-coded data, right? I did put in place a temp work around with a div showing under my box. This is the code for anyone this might help:

    var newlocwinopen = false;
    $(".newloc").click(function() {
        newlocwinopen = true;
    });

    $('#q').typeahead({
        dynamic: false,
        minLength: 2,
        maxItem: 8,
        order: "asc",
        backdrop: {
            "background-color": "#eaeaea"
        },
        delay: 300,
        source: {
            project: {
                url: [{
                    type: "POST",
                    url: "/json/locations.asp",
                    data: {
                        q: "{{query}}"
                    }
                }, "data.locations"],
                display: "locname",
                template: '<div>' +
                            '   <span class="lname">{{locname}}</span>' +
                            '   <span class="laddress">({{addr}})</span>' +
                            "</div>"
            },
        },
        callback: {
            onResult: function(node, query, obj, objCount) {
                if ((objCount == 0 && query.length > 1) || newlocwinopen) {
                        $('#noresults').show();
                        $("#loccontainer").removeClass("padding-bottom-25");
                } else {
                        $('#noresults').hide();
                        $("#loccontainer").addClass("padding-bottom-25");
                }
            },
            onClick: function(node, a, obj, e) {
                alert(JSON.stringify(obj));
                alert(obj.id);
                newlocwinopen = false;
            }
        },
        debug: true
    });

[running-coder]

Cool!

yea the callbacks are there for you to easily implement custom behaviors. In the case of your feature I think it would be a good addition if the Typeahead internally handles it via an option that could be used by others as well.

Could look like this in version 2.0

typeof $.typeahead === 'function' && $.typeahead({
    input: "#search-text",
    minLength: 1,
    maxItem: 12,
    ...
    empty: "<div>No results</div>" // default false
});

[dennisgaudenzi]

Thanks. Did you have a code example for that append in the call back?

[running-coder]

Unfortinately I don't have any other example that uses the onResult but Country_v2. Looking at your latest code you seem to have the right approach!

[dennisgaudenzi]

ok, thanks!

[dennisgaudenzi]

HI there,

I finally got back to this project. I just noticed that the json data is coming back in regular case format (ex: First Letter Caps) but it is displaying in the typeahead box as all lower case. Any idea why that would be? Thanks for the help - this a freaking awesome add in. Great job!

Dennis

[running-coder]

Hey Dennis,

you are right there is a case sensitive issue with the displayed results. For now I am working exclusively on v2.0.0 and will add unit tests for that matter! Lots more features a planned and suggestions from others will be implemented.

if you wanna keep an eye the progress it's under the "prototype-pattern(v2.0)" branch

Thanks for your feedback and comments, I will update this ticket once the 2.0 is ready

[dennisgaudenzi]

ok, got it. Will do.

[dennisgaudenzi]

Sorry, I have another question here. For some reason, when I load my page and then just click anywhere on that page, the "callback:" is firing and "onresult" is also being called (we get alert of "test"). I am not even clicking in or on the typeahead box. Very odd - any thoughts? Thank you,

Dennis

    $('#LocationName').typeahead({
        dynamic: true,
        minLength: 2,
        maxItem: 8,
        order: "asc",
        backdrop: {
            "opacity": 0.60,
            "filter": "alpha(opacity=60)",
            "background-color": "#cccccc"
        },
        delay: 300,
        source: {
            project: {
                url: [{
                    type: "POST",
                    url: "/data-locations",
                    data: {
                        q: "{{query}}",
                        city: "<%=CityID%>"
                    }
                }, "data.locations"],
                display: "locname",
                template: '<div>' +
                            '   <span class="lname">{{locname}}' +
                            '   <span class="laddress">({{addr}})</span>' +
                            '</div>'
            }
        },
        callback: {
            onResult: function(node, query, obj, objCount) {
                var text = "";
                if ((objCount == 0 && query.length > 1) || newlocwinopen) {
                        $('#locmsg').show();
                        $("#loccontainer").removeClass("padding-bottom-25");
                        //Remove any previously selected locations
                        alert($("#EventLocationID").val());
                        $("#EventLocationID").val('');
                        alert($("#EventLocationID").val());
                } else {
                alert("test");
                        $('#locmsg').show();
                        $('#locmsg').html('<a href="javascript:clearLocation()">Clear Selected Location</a>');
                        $("#loccontainer").removeClass("padding-bottom-25");
                }
            },
            onClick: function(node, a, obj, e) {
                //REMOVEFORLAUNCH
                //alert(JSON.stringify(obj));
                //alert(obj.id);
                $('#EventLocationID').val(obj.id);
                newlocwinopen = false;
            }
        },
        debug: false
    });

[running-coder]

hey dennis, no problem.. I see 2 places where the onresult callback is executed (might be more im on ipad and there is no search function hehe)

• when a search is performed (input event is triggered)
• when the typeahead layout resets (focusout of input)

my thoughts are that you have autofocus on the input on pageload and then click somewhere and that triggers the event. You can always add a check to return false if the search string is empty aka "" if (query === "") { return; }

do you think the onresult should only be triggered on input event? I don't remember 100% why I've put it in both places but back then I made sense hmmm..

[dennisgaudenzi]

I think that it would be normal to have the onresult occur if you are in the typeahead box only. I would not want onresult firing if I was typing in another box on the page, right?

I did fix with the zero length string, but onresult is still being called and that seems odd to me!

I thought it was the onfocus onload as well, but I am not seeing anything in my code for that for this page.