angucomplete undesirable click event fires

Question

Recently, I am implementing autocomplete on my search using angucomplete, now the desired output that I wish to achieve is that whenever I select one of the autocomplete suggestions by clicking the mouse, it would navigate to the desire url or let's say google.com for test purposes. The problem with code below is that when I click the textbox without selecting any suggestions, navToUrlByClick function will fire. Any suggestions and sorry for this kind of question since the writer just started to explore javascript. Thanks in advance!

This is my test.html code:

<div class="padded-row" ng-click="navToUrlByClick('http://www.google.com')">
     <div angucomplete-alt id="ex5"
       placeholder="Search projects"
       pause="50"
       selected-object="selectedProject"
       remote-url="http://localhost:5000/"
       remote-url-request-formatter="remoteUrlRequestFn"
       remote-url-data-field="items"
       title-field="subs_name"
       minlength="1"
       input-class="form-control form-control-small"
       match-class="highlight">
     </div>
</div>

And this is my app.js code:

$scope.navToUrlByClick = function(str){
  if ((str != "") || (str != null))
  {
    console.log(str)
    //$window.location.href = str;
  }
}

score 0 · Answer 1 · answered Jul 07 '18 at 17:44

I figure it out by using callback with the few lines of code below and added to my app.js

$scope.selectedProject = function(selected) {
  if (selected) {
    // window.alert('You have selected ' + selected.title);
    $window.location.href = "http://www.google.com";
  } else {
    console.log('cleared');
  }
};

Case closed!

angucomplete undesirable click event fires

1 Answers1