Autocomplete function in AngularJs not working properly

Question

I am working on a AngularJs based SPA. Search box has a autocomplete function which is not working properly. When I start typing in the search box, typed string appears in {{search.name}} and suggestion come in but when I click on one of the suggestion it doesn't appear in {{search.name}}.After that if any other button is pressed string appears.

This is my html code

<div class=" upper-one">

      <div class="search-box" style="display:inline;">
        <img src="img/search.png" width="28px" height="28px" style="float:left;">
        <input id="tags" class="input-search-box" type="text" placeholder="Start typing " data-ng-model="search.name"></input>
     <a>   <div class="go-class" style="position:relative;" data-ng-click="searchProduct()"> Go</div> </a>
      </div>

      {{search.name}  
</div>

This is my jquery code

<script >
  $(function() {
  var availableTags =["Jquery","Html","Css"
];
  $( "#tags" ).autocomplete({
  source: availableTags
  });
 });
</script>

What is wrong with my code?

Abhinav Pathak · Accepted Answer · 2015-04-14 18:37:17Z

This can be solved by simply using the Angular autocomplete.

  function DefaultCtrl($scope) {
$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: scope[iAttrs.uiItems],
            select: function() {
                $timeout(function() {
                  iElement.trigger('input');
                }, 0);
            }
        });
}; 
 });




  <div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
    <input auto-complete ui-items="names" ng-model="selected">
    selected = {{selected}}
</div>

Reference: http://jsfiddle.net/sebmade/swfjT/light/

Collectives™ on Stack Overflow

Autocomplete function in AngularJs not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related