0

I've played around with every setting I can think of, e.g., .clear() and .typeahead('destroy'), and once I've set the source as remote I can't make the typeahead use a local source.

Any thoughts?

Here's the code below that gets called onclick:

var create_typeahead = function(is_remote, titles){

  filters_typeahead.typeahead('destroy');

  if(is_remote){
        var remote_url = titles;
        var titles = new Bloodhound({
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: remote_url,
                q=%QUERY',
                wildcard: '%QUERY'
            }
        });
  }
  else{
        var titles0 = titles;
        var titles = new Bloodhound({
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
            local: titles0
        });    
  }

  titles.initialize(); 

  filters_typeahead.typeahead({
    highlight: true,
    minLength: 2,

    },
    {
      name: 'titles',
      displayKey: 'name',
      source: titles,
      templates: {
        suggestion: function(data) {
            return '<div>' + data.name + '</div>';
        }
    }
});

};

tim peterson
  • 23,653
  • 59
  • 177
  • 299
  • I misread your question. Switching from remote to local, not remote sources. If there any reason you don't just use either remote or local? Either one can handle a function to return the data. – trenthaynes Mar 31 '16 at 13:33
  • I have multiple typeaheads that I'm toggling between. – tim peterson Mar 31 '16 at 16:37
  • Can you expand on that a bit? Do you need to use bloodhound? If you can simply define your source for the typeahead as a function, then you can deal with getting whatever data (local json, ajax call, etc) via that function. – trenthaynes Mar 31 '16 at 18:26
  • Thanks yeah I may get rid of bloodhound. I know it's called a suggestion engine but from googling it, I can't understand what it does other than to annoy the crap out of everyone. I want the same input box to handle different data sources, some local and some remote depending on pre-filtering by the user. – tim peterson Mar 31 '16 at 18:31
  • 1
    Even if you keep bloodhound (which clears and initializes much more reliably than typeahead), you can use `local` using a function that returns your data to local. If you use remote, it's different. You can change the url and parameters, but you always have to get the data from a url. – trenthaynes Mar 31 '16 at 18:40
  • I actually find lack of clearing to be a big problem when I use bloodhound with typeahead on remote sources. I find that various length inputs don't fetch remote or the dropdown is empty in unpredictable instances. E.g., in a list of majors (1,500) in a database table looking for "mechanical engineering" I get results when I type "mechanica" but not when I complete the word and not upon typing the space. It finds mechanical engineering again when I type into the 2nd word but then it goes away again. Just lots of unexplained behavior that confuses our site users looking for obvious choices. – tim peterson Mar 31 '16 at 19:02
  • I've seen more than a few instances of using typeahead w/o bloodhound. – trenthaynes Mar 31 '16 at 19:05

1 Answers1

1

My answer is a little more involved than yours, but hopefully it will point you in the right direction.

When you want to change a remote source using bloodhound, you will have to clear the bloodhound object and reinitialize it.

Here I am creating an initializing a bloodhound instance:

var taSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) {
    return obj.Value;
  },
  remote: remoteSrc
});

taSource.initialize(true);

In the logic to switch I call both clear() and initialize(true), passing true for the reinitialize paramter:

taSource.clear();
taSource.initialize(true);

I handle changing the URL in the prepare method that is available as part of the remote object.

prepare: function(query, settings) {
  settings.url = urlRoot + '/' + whichType + '?q=' + query;
  console.log(settings.url);
  return settings;
},

Here is a full example show how I handle it.

trenthaynes
  • 1,668
  • 2
  • 16
  • 28