Browse more result with typeahead

[xiridescent]

How do I allow user to browse more result? and display 3 additional results each time user click on "browse more"?

var substringMatcher = function(strs) {
        return function findMatches(q, callback) {
          var found, substrRegex;
          found = [];

          substrRegex = new RegExp(q, 'i');

          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              found.push({ value: str });
            }
          });
          callback(found);
        };
      };

      var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
      'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
      'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
      'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
      ];

 $('#search .typeahead').typeahead({
        highlight: true,
        order: "asc",
        minLength: 1
      },{
        displayKey: 'value',
        source: substringMatcher(states),
        templates :{
          footer: function (context) {
            return "<a href=''> Browse more </a> ";
          }
        }
    });