Use Twitter and Bootstrap Typeahead together

[brianmhunt]

It would seem that Twitter Typeahead (TTA) and Bootstrap Typeahead (BTA) both occupy the identifier $.typeahead.

It seems that TTA is mean to be Bootstrap-compatible, as the documentation indicates that one could simply add TTA after BTA.

How might one concurrently use both BTA and TTA?

Since BTA is not (yet) a proper subset of TTA functionality (eg BTA can show suggestions drop-down even without input by setting minLength to 0, TTA does not seem to have this), it would seem that that this is desirable in certain cases.

See also the Stackoverflow question

[jharding]

It's not recommended to use both typeahead.js and Bootstrap's typeahead plugin. Having said that, if you wanted to do it, all Bootstrap plugins have noConflict available that'll allow you to do something like:

$.fn.bootstrapTypeahead = $.fn.typeahead.noConflict();

[brianmhunt]

Many thanks @jharding - that's helpful.

May I ask, just before closing this issue, why the recommendation not to use both at the same time?

[jharding]

Well they serve the same purpose, it's just that typeahead.js offers more functionality out of the box. If you don't need the extra functionality, you should just use Bootstrap's typeahead.

[brianmhunt]

Thanks for the reply. Your answer indicates that I have probably not communicated the issue very well - sorry. Please let me try again.

While TTA definitely has useful functionality beyond what BTA provides, TTA seems to be missing at least a couple bits of functionality available in BTA, including:

1. An equivalent to Bootstrap's minLength (that, notably, when set to 0 shows the prefetch/list on input focus); and
2. The ability to pass a custom, arbitrary synchronous or asynchronous function as the source/filter. TTA seems only to have prefetch/remote (URLs) and local (an array of hard-coded datums).

I use both of these, and so it would seem that I cannot replace BTA with TTA, without significant issue, to take advantage of the extra functionality in TTA.

So while I would like to use it, TTA does not appear to be a drop-in replacement for BTA because of at least the above issues - unless I misunderstand or overlooked something.

If the noted features are not already present, perhaps I should open issues for the above items?

[jharding]

An equivalent to Bootstrap's minLength (that, notably, when set to 0 shows the prefetch/list on input focus); and

Feel free to create an issue for this.

The ability to pass a custom, arbitrary synchronous or asynchronous function as the source/filter. TTA seems only to have prefetch/remote (URLs) and local (an array of hard-coded datums).

How exactly are you using this? Depending on that, v0.9.0 might introduce the functionality you're looking for.

[brianmhunt]

Many thanks. I submitted issue #120 regarding the first point.

Right now I am passing a function as the source. The content of source changes depending on what other fields say, and it may (or may not) use an asynchronous source each query.

Essentially the source may be a function with one of two formats:

Synchronous:

function source(param) {
   results = something_synchronous;
   return results;
}

Asynchronous

function source(param, callback) {
   do_something_async(function (results) { callback(results) });
}

Offhand I am not sure what method Bootstrap Typeahead is using to determine if the source function is asychronous but there are two possibilities I have come across (and I am happy to check and report back, in any case):

1. If the return is undefined, presume it is asynchronous;
2. look at source.length to determine the number of arguments; if there are two then waits for a callback.

Alternatively it can sort-of "duck"-type and use the return (if defined) and in any case update the results when the async callback is called with new results.

Is that helpful?

[jharding]

Yeah thanks. I'm curious as to what you use source for though. If it's hardcoded data, you could replicate that in typeahead.js with local, if it's for making remote calls, you can replicate that with remote.

[brianmhunt]

Oh sorry, yes - I use typeahead to autocomplete form fields, but the sources themselves are either other form fields or constructions of those fields.

For example a set of fields may have a name. The number of sets may increase, and the name may be reused across sets. Typeahead reduces spelling errors and speeds data entry. So the data is neither hard coded nor remote. It is based on dynamic data on the client.

Also sometimes fields will autocomplete computed values. For example, an address may be represented across multiple distinct fields - eg name, street, city, etc. however in places these fields are combined and auto-complete suggest full addresses. The components that constitute the addresses may also be modified dynamically in the browser.

Incidentally: All of this dynamic data flows from two way client side binding with knockout.js (n my case) though other dynamic apps may use eg angular.js.

I hope this is helpful.

[brianmhunt]

Another use case is when the client info is dynamically determined. For example when the source may be X or Y depending on whether a certain condition is met e.g. a checkbox is set.

[jharding]

Alright so it sounds like for your use case, you need to be able to dynamically change local data. That may be something we address through #95.

[brianmhunt]

Yes, that'll do. :) closing and deferring to #95 and #120

Thanks