No option to show all prefetched data on click without typing any in to textbox

[NipunaMarcus]

I tried to do this with your Default Suggestions example, but in my case data set is dynamic. Because of that this is not suitable. Also some users may have no idea what to type in textbox to load the suggestions... Sometimes user have to try inputting A to Z to get a suggestion..

[jlbooker]

Hi @NipunaMarcus,

I've been able to successfully show suggestions onClick by using the minLength: 0 option, and providing two suggestion sources. The first source is a Bloodhound object setup to do the dynamic suggestions by searching on a remote server. The second source provides a default set of suggestions if the search query is empty. It looks something like this:

function defaultSearchProvider(q, sync) {
        // Return an empty set if the query is not empty
        if (q != ''){
            return [];
        }

        // Return default suggestion set
}

[NipunaMarcus]

Hi @jlbooker

Thank you for the reply .... Actually in my case it is not possible for me to have second source since the data in the source is dynamic ... So i cannot have a default set of suggestions ... So what i did was just added a new flag called "showAll: true" to the property list of typeahead .. If this flag is true then onFocus or onClick All the available data will be loaded in to the dropdown and a scroller will be available if there is a overflow.

... Thank you again ....

[andycorm]

I'm also having this issue and it's driving me insane... Shouldn't typeahead/bloodhound return all results by default when the minLength is set to 0 and the query string is empty? An empty string is never going to match anything, so it seems obvious to me that if the user has both of these options set, everything should be returned 😖

[NipunaMarcus]

I fixed this by editing out the library ... i didn't send a PR because not sure that is the correct way to archive it ... but here is my fix to the typeahead[1], please read ahead from this point and how i used it to show all records[2]

[1]. https://github.com/wso2/carbon-dashboards/blob/484f71fddda1059a8f3662d7ba3bca14ef60c309/apps/portal/js/typeahead.bundle.min.js#L479

[2]. https://github.com/wso2/carbon-dashboards/blob/484f71fddda1059a8f3662d7ba3bca14ef60c309/apps/portal/js/dashboard-settings.js#L307

[jlbooker]

@NipunaMarcus Feel free to open a PR and we'll have a look!

[NipunaMarcus]

Sure.. will do

[joshuapinter]

I fixed this by editing out the library ... i didn't send a PR because not sure that is the correct way to archive it ... but here is my fix to the typeahead[1], please read ahead from this point and how i used it to show all records[2]

[1]. https://github.com/wso2/carbon-dashboards/blob/484f71fddda1059a8f3662d7ba3bca14ef60c309/apps/portal/js/typeahead.bundle.min.js#L479

[2]. https://github.com/wso2/carbon-dashboards/blob/484f71fddda1059a8f3662d7ba3bca14ef60c309/apps/portal/js/dashboard-settings.js#L307

Hey @NipunaMarcus, I extracted your solution:

if (!query) {
  matches = [];
  for (var obj in that.datums) {
    matches.push(obj);
  }
}

And it worked great!

Did you ever get around to creating a PR for this? If not, I can go ahead and do it for you so that others can benefit from this.

[joshuapinter]

FYI, I went ahead and created a simple PR with @NipunaMarcus's suggested change to the bloodhound.js file: #214

Please review it and see what else needs to be done to it.

[NipunaMarcus]

@joshuapinter thank you for opening a PR :D ...

[jcputney]

Any update on this? We're running into this issue as well.

[jlbooker]

I'm not sure this could ever be accepted.

Typeahead can rely on one (or more) back-end data sources. If the only data source is a remote source (i.e. a ajax call to an endpoint) then showing all results with a scroll list could have a very negative performance impact. It's conceivable that the full remote data set may not be available, or may not be something we want to send over the network (if, for example, the data source is backed by a database with thousands/hundreds of thousands of results). This only works if your dataset is relatively small, but that assumption is not one we can safely make for all users of TypeAhead.

I would refer you to my earlier example, with a bit more explanation:

function defaultSearchProvider(q, sync) {
        // Return an empty set if the query is not empty.
        // This hides the suggestions given below if the user has actually entered a query string
        if (q != ''){
            return [];
        }

        // There's no query string, so return default suggestion set
       // E.g. Fetch the suggestion from a remote server, from a local cache, or a static array
       // This could include all records, or maybe only the first 10-15
}

[jlbooker]

It's also important to set minLength: 0 so that Typeahead will query the data provider for results when there is no query string. This query could use a remote data source and the server endpoint could be programmed to return all results when the query string is empty.