Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem with source async #1185

Open
ghost opened this issue Apr 26, 2015 · 16 comments
Open

problem with source async #1185

ghost opened this issue Apr 26, 2015 · 16 comments

Comments

@ghost
Copy link

ghost commented Apr 26, 2015

$('#input-rms').typeahead({
  hint: true,
  highlight: true,
  minLength: 2,
  classNames: {
    menu: 'tt-dropdown-menu'
  }
},
{
  name: 'rms',
  limit: 10,
  source: function (q, sync, async) {
    $.ajax('/api/getrms?name='+q, // it will return a list of data of length 7
           {
            success: function(data, status){  async(data); }
           }
          );
  }
});

Problem:
The ajax url will return a list of data of length 7, however, the suggestions only render the first 3 results.

Can anyone gives a example about how to use the async in source.

@jharding
Copy link
Contributor

Hmm, I'm not sure what's causing your problem. Here's an example I just whipped up that should be functionally equivalent to your code. It works as expected.

Can you test your code in an incognito window? Just to make sure there's nothing goofy going on with caching. Also, if you could point me towards a page that demonstrates your problem, I can help debug.

@ghost
Copy link
Author

ghost commented Apr 27, 2015

I tested in incognito window it doesn't work.

And I look at the source code of async function source code in typeahead.bundle.js.
In line 1705, rendered += suggestions.length is putted before that._append(query, suggestions.slice(0, that.limit - rendered));.

I think it is this line cause the problem. When I putted it after that._append(query, suggestions.slice(0, that.limit - rendered)); It works the way I want.

function async(suggestions) {
                    suggestions = suggestions || [];
                    if (!canceled && rendered < that.limit) {
                        that.cancel = $.noop;
                        rendered += suggestions.length;
                        that._append(query, suggestions.slice(0, that.limit - rendered));
                        that.async && that.trigger("asyncReceived", query);
                    }
                }

@jharding jharding added this to the 0.11.2 milestone Apr 27, 2015
@jharding
Copy link
Contributor

Yeah... I'm not sure why that line of code exists. I'll get it fixed, thanks for the report and thanks for digging into the problem. Very helpful.

@jharding
Copy link
Contributor

Posted a PR with a fix, see #1200. Here's a version of typeahead.bundle.js with the fix in case you want to try it out before it is released.

@ghost
Copy link
Author

ghost commented Apr 28, 2015

Ok, thanks

@nostalgiaz
Copy link

+1! The patch works like a charm! Can you please release it?

@martino
Copy link

martino commented May 6, 2015

Release please!

@jormon
Copy link

jormon commented May 18, 2015

Can confirm this is a problem. It's exacerbated when you only use async and your remote returns exactly limit results. In this case rendered - limit = 0, so (0,0) gets passed to suggestions.slice

@jlidbeck
Copy link

For what it's worth, changing it this way makes async() structurally similar to sync(), and also keeps rendered updated correctly:

typeahead.bundle.js
1719    function async(suggestions) {
1720        suggestions =(suggestions || []).slice(0, that.limit - rendered);
1721        if (!canceled && suggestions.length) {
1722            that.cancel = $.noop;
1723            rendered += suggestions.length;
1724            that._append(query,suggestions);
1725            that.async && that.trigger("asyncReceived", query);
1726        }
1727    }

@jarthod
Copy link

jarthod commented May 26, 2015

Fixed by #1212

@sebsonic
Copy link

Is it just me who has a problem with this fix? Whenever rendered is smaller than limit, this is failing.
eg. rendered = 3; that.limit = 5

suggestions =(suggestions || []).slice(0, that.limit - rendered)
=> suggestions.length = 2

I don't know if I'm doing something wrong but for what it's worth, here's the work around I implemented:

function async(suggestions) {
    var howMany;
    suggestions = suggestions || [];
    if (!canceled && rendered < that.limit) {
       that.cancel = $.noop;
       rendered += suggestions.length;
       howMany = (rendered <= that.limit) ? rendered : that.limit - rendered;
       that._append(query, suggestions.slice(0, howMany));
       that.async && that.trigger("asyncReceived", query);
    }
}

@jlidbeck
Copy link

@sebsonic , I believe that's the intended behavior--limit is the total number of suggestions to render from all sources combined.

@dessalines
Copy link

oh my god thank you guys so much for this fix. I was tearing my hairout with this one.

@Glavin001
Copy link

+1 I also am experiencing this problem, and had tracked down the problematic code. Great to see there's a fix!

@staticglobal
Copy link

+1 for pushing this fix. I also spent over an hour digging into the source of 0.11.1 and came to the same conclusion that the "rendered +=" line needs to be moved down.

@skovmand
Copy link

skovmand commented May 12, 2016

Struggled with this problem for a long time today. Moving the line seems to fix it. How come it isn't being fixed in the release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests