//html
   <div id="the-basics">
     <input class="typeahead form-control" type="text" placeholder="Search Users" >
   </div>
	//ts
export class Asd{
  substrRegex;
  temp;
  suggestMatch;

  search;

attached(){
  this.searchFun();
}

 async searchFun(){
    var substringMatcher = function(strs) {
      return async function findMatches(q, cb) {
        var matches, substrRegex;

        // an array that will be populated with substring matches
        matches = [];

        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');

        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function(i, str) {
          if (substrRegex.test(str)) {
            matches.push(str);
          }
        });

        cb(matches);
        console.log(matches)
        this.suggestMatch = await matches;
        console.log('suggested'+this.suggestMatch)
      };
    };

    var states =
    [
      {
        "firstName": "Trajko",
        "lastName": "Trajkov",

        "image":"http://placehold.it/50x50",

      },

      {
        "firstName": "Petko",
        "lastName": "Petkov",

        "image":"http://placehold.it/50x50",
      },
      {
        "firstName": "Stanko",
        "lastName": "Stankov",

        "image":"http://placehold.it/50x50",

      }
    ]

    this.temp = $('#the-basics .typeahead')
    this.temp.typeahead({
      hint: true,
      highlight: true,
      minLength: 1,

    },
    {
      name: 'states',
      source: substringMatcher(states),
      templates: {
        empty: [
          '<div class="empty-message">',
            'Unable to find result',
          '</div>'
        ]
        .
        join('<br>'),
        suggestion: function(data){
          return '<p><img src=' + data.image + '/>' +' '+  data.firstName +' '+data.lastName+'</p>';
        },
        footer: '<hr><a href=#> See All </a>'

      },


    });


  }
}