使用autocomplete.js并从多个Algolia来源读取的Angularjs应用无法正常工作

Question

I'm trying to implement autocomplete functionality using AngularJS and Algolia's Autocomplete.js with two sources (indexes) from Algolia.

The second source autocomplete works fine, but the address autocomplete only works for the first letter/number typed. As you type the second character, the address listings disappear. If I swap the two sources, the address works fine, and the zipcode only works for the first letter/number.

Additionally, when doing a search, the console.log(address); displays the proper address that's being searched for, it's just not displaying in the autocomplete results.

Here's a gif of it in action: http://d.pr/i/2GCE

$scope.getDatasets = function() {
return [{
  source: algolia.sources.hits(settings.replica, { hitsPerPage: 5 }),
  displayKey: 'address',
  name: 'address',
  templates: {
    suggestion: function(suggestion) {

       var address = '<span class="address">' + suggestion._highlightResult.address.value;

       if(suggestion.aptmnt) {
        address += ', Unit ' +suggestion.aptmnt + '</span> | ';
       } else {
        address +='</span> | '; 
       }

       address += '<span>' + suggestion.totbdrms + ' beds </span> | ' +
        '<span>' + suggestion.totbaths + ' bath asdf </span> | ' +
        ' <span> $' + cleanPrice(suggestion.price) + '</span>';
        console.log(address);
        return address;
    }
  }
},{
  source: algolia.sources.hits(settings.zipcode, { hitsPerPage: 5 }),
  displayKey: 'zipcode',
  name: 'zipcode',
  templates: {
    suggestion: function(suggestion) {
       var zipcode = '<span class="zipcode">' + suggestion.zipcode + '</span>';
        return zipcode;
    }
  }
}]
};

I'm using

jquery - v1.12.4
angularjs - 1.6.1
algoliasearch.angular.min.js - v3
algoliasearch.helper.min.js - v2.18.0
autocomplete.angular.min.js - v0.28.1
angular-ui-router.js - v0.4.2

Answer 1

Ok, I found a workaround. I never could get the Angular version of this autocomplete to work. Additionally, when I console.log(o); the constructor function function Dataset(o) {} inside autocomplete.angular.js, it was logging it out twice. Not sure if that is the issue...but the normal autocomplete.js isn't logging that out twice.

Since swapping over to autocomplete.j, the autocomplete has been working great. Here's the code I'm using:

autocomplete('#quicksearch', { hint: false, debug: true, openOnFocus: true }, [
{
  source: autocomplete.sources.hits(settings.replica, { hitsPerPage: 5 }),
  displayKey: 'address',
  name: 'address',
  templates: {
    suggestion: function(suggestion) {

       var address = '<span class="address">' + suggestion._highlightResult.address.value;

       if(suggestion.aptmnt) {
        address += ', Unit ' +suggestion.aptmnt + '</span> | ';
       } else {
        address +='</span> | '; 
       }

       address += '<span>' + suggestion.totbdrms + ' beds </span> | ' +
        '<span>' + suggestion.totbaths + ' bath </span> | ' +
        ' <span> $' + suggestion.price + '</span>';
        return address;
    }
  }
},{
  source: autocomplete.sources.hits(settings.zipcode, { hitsPerPage: 5 }),
  displayKey: 'zipcode',
  name: 'zipcode',
  templates: {
    suggestion: function(suggestion) {
       var zipcode = '<span class="zipcode">' + suggestion.zipcode + '</span>';
        return zipcode;
    }
  }
}

]);