Typeahead source doesn't accept functions from HTML attributes

[kAlvaro]

According to docs, you can use a data-source HTML attribute to provide either a array of strings or a function. The first option works fine:

<input type="text" data-provide="typeahead" data-source="['America', 'Asia', 'Europe']">

The second one doesn't. If you do e.g. this:

<input type="text" data-provide="typeahead" data-source="foo">

... the argument gets interpreted as:

["f", "o", "o"]

[andrewdeandrade]

Hey @kAlvaro,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[slava-vishnyakov]

Hello,

http://jsbin.com/osazuv/3/edit

Basically just:

<input type="text" data-provide="typeahead" data-source="source">

and

function source(query, process) {
  return ['123','234'];
}

[koenpunt]

My PR fixes that: #5593

[fat]

data source doesn't accept a function from html by design

[kAlvaro]

@fat If that design decision is not subject to change, can the documentation be fixed?

[slava-vishnyakov]

I don't get it. Then how does one load data via ajax call?
Or is it correct way that I would keep all 5 million auto-completes in data-source attribute?

[cvrebert]

@slava-vishnyakov: you specify your source function in the call to $(...).typeahead() instead.

[slava-vishnyakov]

@cvrebert: Thanks a lot! That works!

For people looking for solution, stumbling into this thread:

http://jsbin.com/osazuv/12/edit

[kmtong]

@fat The design decision makes it very clumsy in implementation of dynamically generated typeahead field. It would be clean and nice when a newly created input field use the html attribute to specify the javascript function rather than setting the source with $(...).typeahead() explicitly after the field is created.

[llacroix]

I have to admit that this is a problem that I faced today. The documentation should be more clear on the implementation. I understand why having the function argument for data-source is only available using the js direct call.

If people were able to do that, many people could be tempted to add their typeahead handlers to the window object. The big problem here is that twitter bootstrap doesn't have any context. The only place it could find a function is from the window object. This also means that if anything overwrite the global function,
typeahead will not work or the typeahead function may overwrite an other function.

In any case, having handlers in the window object isn't a good things and it's clear that twitter devs will never do it.

That said, adding some context to twitter could be done and could greatly improve the api.

Let say we have something like that:

 <div id="one">
   <input type="text" data-provide="typeahead" data-source="games" />
   <input type="text" data-provide="typeahead" data-source="games2" />
 </div>

and something like this is JS

$("#one").setContext({
   typeahead: {
       sources: {
          games: function () {...},
          games2: function () {...}
       } 
   }
});

the data-source would lookup the closest used context and return the function in the typeahead definition. This way, the window object is never used and every body is happy. Someone could define multiple programmatically context with sources of the same name but with different handlers.

This is sure not perfect but adding some contexts to bootstrap could actually add something good. Like defining some behaviours inside js and keeping the markup as much clean as possible.

[cvrebert]

This issue has been mooted by #7805.