Typeahead change source

Question

I'm trying to change the source of typeahead, but all them answers I found didn't work for me (probably because of a newer bootstrap version). I made a backend search based on what the user searches. Here is my code:

$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1,
        limit: 2,
    },
    {
        name: 'organizations',
        source: substringMatcher(getOrganizationData())
    }).on("input", function(e) {
        organizationQuery = e.target.value;

        // Here I want to update the source

        // Not working:
        //$(".typeahead").data('typeahead').source = substringMatcher(getOrganizationData())

        // Not working:     
        //$('.typeahead').data('ttTypeahead').dropdown.datasets[0].source = substringMatcher(getOrganizationData())

        // Not working:
        // var autocomplete = $('input').typeahead();
        // autocomplete.data('typeahead').source = substringMatcher(getOrganizationData());
});

And here is my getOrganizationData() method:

function getOrganizationData()
{
    var tempResults = [];
    $.getJSON( "search-organization?query="+organizationQuery, function( data ) {

        $.each(data, function (key, val) {
            var display = val.coc_number + ", " + val.name
            tempResults[key] = display;
            organizationHolder[display] = val.id;
        });

    });

    return tempResults;
}

How am I supposed to find results based on what I type if I can't update the source? Thanks in advance!

A working example of using typeahead's source option can also be found in this answer http://stackoverflow.com/a/36695088/203371 — Ben Smith, Apr 27 '17 at 20:54
this make help you https://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example/12097876 — Ahmed Elbendary, Dec 10 '18 at 14:56

davidkonrad · Accepted Answer · 2016-02-17T19:37:36.193

AFAIK substringMatcher() is from the examples, it works only on string arrays and is not needed - the search is performed serverside. Also you do not have to respond to user input, that is the typeaheads job. To use a remote JSON query as source the syntax is :

source: function(query, sync, async) { .. }

where sync and async is callbacks. I guess your returned JSON is on the form

[ 
  { "name" : "qwerty" },
  { "name" : "another qwerty" },
  ... 
]

When using JSON it is important to define a displayKey, so the typeahead know which key / value property it should show in the dropdown. So

$('.typeahead').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 1,
        limit: 2,
    },{
        name: 'organizations',
        displayKey: 'name', //example
        source: function(query, sync, async) {
           $.getJSON( "search-organization?query="+query, function( data ) {
              async(data);
           })
        })
    }
});

The above will automagically show a typeahead with highlighted substrings. Confirmly working on latest release.

If you want to display some other values in the typeahead, i.e the mentioned val.coc_number + ", " + val.name then manipulate the returned JSON before you call async() :

data = data.map(function(item) { 
   item.numberName = item.coc_number + ", " + item.name;
   return item;
})

and change displayKey accordingly :

displayKey: 'numberName',

Works like a charm! Really appreciated! – Koeno Feb 18 '16 at 08:14 — Koeno, Feb 18 '16 at 08:14

Typeahead change source

1 Answers1

Linked