Typeahead + Bloodhound - Have to enter additional character to see data source change

Question

I have to code to get source from different endpoints for typeahead based on number of characters entered in input field. However the suggestions from new source are displayed only after entering extra character. Suggestions that should show after input length is 3 are showing up on entering 4 chraracters

I have created sample of problem in jsfiddle http://jsfiddle.net/yj7hdzka/

In the sample new suggestion from new data source with title "some title here3" should show as soon as I entered 3 characters but doesnt show until 4 characters are entered in input field.

Here is html and javascript

<input type="text" id="search-input">
<button id="switch">Switch Data Source</button>
<span id="sourceSelected"></span>

var data1 = [{
    label: "some title here1",
    desc: "some option here1",
    category: [{
        name: "category 1"
    }, {
        name: "categoy 2"
    }]
}, {
    label: "some title here2",
    desc: "some option here2",
    category: [{
        name: "category 1"
    }, {
        name: "categoy 2"
    }]
}];

var data2 = [{
    label: "some title here3",
    desc: "some option here3",
    category: [{
        name: "category 1"
    }, {
        name: "categoy 2"
    }]
}, {
    label: "some title here4",
    desc: "some option here4",
    category: [{
        name: "category 1"
    }, {
        name: "categoy 2"
    }]
}];

var titles = new Bloodhound({
    datumTokenizer: function (data) {
        return Bloodhound.tokenizers.whitespace(data.label);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data1
});

titles.initialize();

$('#search-input').typeahead({
    highlight: true
}, {
    name: 'titles',
    displayKey: 'label',
    source: titles.ttAdapter()
});

var sourceSelected = $('#sourceSelected');
var toggle = false;
$('#search-input').keyup(function(){
    if($('#search-input').val().length > 2){
    titles.local = data2;
    sourceSelected.text('Data Source 2');
  } else {
    titles.local = data1;
    sourceSelected.text('Data Source 1');
  }
  titles.initialize(true);
});


sourceSelected.text('Data Source 1');

Answer 1

I faced two different problems while trying to find a solution:

1. the latest typeahead version seems to be less stable than the previous version 0.10.2 (and the Original twitter project is considered dead, some community forks exist and are maintained).
2. a bound data source does not react to updates properly.

What I changed:

1. Switched to the 0.10.2 typeahead bundle.
2. manually added Bloodhound search result.

Updated code:

var filter = function(suggestions) {
  return $.grep(suggestions, function(suggestion) {
    return -1;
  });
}

var titles = new Bloodhound({
  name: 'titles',
  datumTokenizer: function(data) {
    return Bloodhound.tokenizers.whitespace(data.label);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: data1
});
titles.initialize();

$('#search-input').typeahead({
  highlight: true
}, {
  name: 'titles',
  displayKey: 'label',
  source: function(query, callbackFunc) {
    titles.clear();

    if ($('#search-input').val().length > 2) {
      titles.local = data2;
      sourceSelected.text('Data Source 2');
    } else {
      titles.local = data1;
      sourceSelected.text('Data Source 1');
    }

    titles.initialize(true);
    titles.get(query, function(suggestions) {
      callbackFunc(filter(suggestions));
    });
  }
});

Part of my answer has been taken from this SO answer and to be honest, I don't exactly know how the get() method of the typeahead plugin was implemented and why it requires a callback function as seen in my solution.

Here's a working jsfiddle, I hope that's what you were looking for.