Bootstrap-3-Typeahead, list options based on search displaying another field

Question

Using Bootstrap-3-Typeahead plugin performing the search based on what the user type and displayed the information from another column of the database.

My server-side method performs the filter based on the services column and returns the name (colune name) of the establishments as a result and ta certinho, that is, when it is informed Website or Informatica the filter searches the test companies American and Microsoft and others I have as a test, but not list as selection option.

In this other post: Bootstrap-3-Typeahead does not list options Jorge showed me that it works in a simple way, but it does not meet my demand.

Follows my code:

$("#pesquisa").typeahead({
                source: function (query) {
                    return $.get("/Estabelecimento/GetDados", { q: query });
                },
                minLength: 3
            });

Html

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <input type="text" id="pesquisa" name="pesquisa"  class="form-control typeahead" autocomplete="off" placeholder="Pesquisar" />
                <div class="input-group-btn"><button class="btn btn-primary">Pesquisar</button></div>

            </div>
        </div>
    </div>
</div>

Return of my $.get call when I search by site, it filters and brings the names below:

["Americanas", "Apple", "C & A", "Carrefour", "Microsfot", "Riachuelo", "Saraiva", "Sony"]

Answer 1

Proof of concept

For example I am using a list of countries available in a REST service to simulate a get request.

Perform the search in English, e.g. Port -> Portugal, Spa ->Spain, but you can also put the abbreviation with 3 letters e.g. PRT, ESP

  $(document).ready(function() {

  var data = $.getJSON('https://restcountries.eu/rest/v2',null, function(data){

    $("#typeahead").typeahead({
    source: data,
      matcher: function (item){
         
         if(item.alpha3Code.toUpperCase().indexOf(this.query.toUpperCase())>=0) {
           //console.log(item.alpha3Code);
            return true;
          }
          
          else if(item.name.toUpperCase().indexOf(this.query.toUpperCase())>=0) {
           //console.log(item.name);
            return true;
          }
          else
          {
            return false
          }
      },
    autoSelect: true
  });


})


  });
   

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.1/bootstrap3-typeahead.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<input type="text" id="typeahead">

Updating

You can use the function in it

source: function (query) {
   return $.get("/Estabelecimento/GetDados", { q: query });

instead of

source: data,

In the example I did not use because I am using a public data source and the example would no longer work.

So when returning your already filtered list the matcher function should always return true, will replace the native function that checks that the text matches the search key.

matcher: function (item){return true;}),

so that all the items on your list match.

So the plugin will accept as a response any element of your list (which is already filtered).

In the case presented if you made the filter in the URL the example might not work, just wanted to show how it works.