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

Navigation
0

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

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

In this other post: > Bootstrap-3-Typeahead does not list options Jorge showed me that it works simply but does not meet my demand.

Follow 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 from my $ .get call when I search by site, it filters and brings the names below: 

["Americanas", "Apple", "C & A", "Carrefour", "Microsfot", "Riachuelo", "Saraiva", "Sony"]
    
asked by anonymous 18.07.2018 / 16:11

1 answer

0

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, eg. Port - > Portugal, Spa - > Spain, but you can also put the abbreviation with 3 ex letters. 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><scriptsrc="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><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


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

Update

You can use the function in the same 

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

instead of 

source: data,

In the example I did not use it because I'm using a public data source and the example would stop working.

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

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

so that all the elements in your list match.

So the plugin will accept as answer any element of your list (which has already been filtered).

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

    
18.07.2018 / 17:39
How to pass UTM parameters on a link of class type Upload video files with angularJS