1

I am creating an ionic project and I am trying to integrate with Algolia autocomplete.js. I managed to make the search system work, however I added a ng-click on my search results and this function is not working as presented in this codepen that I did as example below:

http://codepen.io/marcos_arata/pen/VKVOky

Inside my algolia's result template:

<a ng-click="add_name({{{ name }}})">

Function that should be run when clicked:

$scope.add_name = function(name) {
    alert('User added!');
    console.log(name);
}

I tried to inject the results inside the scope but didn't work as well:

autocomplete('#search_name', { hint: false, debug: true, openOnFocus: true },[{
    source: index.ttAdapter({ hitsPerPage: 15 }),
    templates: {
        header: '',
        suggestion: function(hit) {

            $scope.hit = hit;

            return template.render(hit);

        }
    }
}]);

http://codepen.io/marcos_arata/pen/VKVOky

---- SOLVED ----

Instead of creating a ng-click function inside your templates, you can handle the event click of your search inside your "autocomplete:selected" function and use the dataset and suggestion results.

.on('autocomplete:selected', function(event, suggestion, dataset) {

  $scope.name = suggestion.name;
  console.log($scope.name);
  ## create any functions with the suggestion and dataset results inside

});
4
  • You can do like this : <a ng-click="add_name(name)"> Commented Oct 21, 2016 at 13:54
  • hi @VijayMaheriya, doesn't work as well. my function doesn't work when I click on my search results as you can check on my codepen Commented Oct 21, 2016 at 13:57
  • the click is being swallowed by the .on('autocomplete:selected' event. I don't know why that is or how to fix it, but I thought maybe that extra info might be helpful. Commented Oct 21, 2016 at 13:59
  • angular and javascript both are not working. coz it is stop Commented Oct 21, 2016 at 14:04

1 Answer 1

2

EDITING THE ANSWER:

Here is the codepen:

Apparently the suggestion keep the name clicked, so you dont need an extra function:

.on('autocomplete:selected', function(event, suggestion, dataset) {

  $scope.name = suggestion.name;
  console.log($scope.name);
});
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks a lot, it works fine! The only issue is that it looks like the 'function' is running 2 times. Do you know why?
I will try to open the codepen and check it out in a bit
also, do you know how can I clear the input after the selection? I tried with angular.element(document.querySelector('#search_location')).html(''); but didn't work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.