AngularJs中的自動完成功能無法正常工作

Question

我正在使用基於AngularJs的SPA。搜索框有一個自動完成功能，它不能正常工作。當我開始在搜索框中輸入內容時，鍵入的字符串出現在{{search.name}}中，並且有建議進入，但是當我點擊其中一個建議時，它不會出現在{{search.name}}中。任何其他按鈕被按下的字符串出現。

這是我的html代碼

<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> 

這是我的jQuery代碼

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

什麼是錯我的代碼？

Answer 1

這可以通過簡單地使用Angular自動完成來解決。

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> 

參考：http://jsfiddle.net/sebmade/swfjT/light/