Javascript Angularjs自动完成

我使用angularjs中的一个弹出窗口和一个表单。我使用一个自动完成器作为-

portfolio.directive('auto', function($timeout) { var 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"]; return { restrict : 'A', require : 'ngModel', link : function(scope, iElement, iAttrs) { iElement.autocomplete({ source: names, onSelect: function() { $timeout(function() { iElement.trigger('input'); }, 0); } }); } }; }); 指令（'auto'，函数（$timeout）{ 变量名称=[“约翰”、“比尔”、“查理”、“罗伯特”、“阿尔班”、“奥斯卡”、“玛丽”、“席琳”、“布拉德”、“德鲁”、“丽贝卡”、“米歇尔”、“弗朗西斯”、“琼”、“保罗”、“皮埃尔”、“尼古拉斯”、“阿尔弗雷德”、“杰拉德”、“路易斯”、“阿尔伯特”、“爱德华”、“贝诺伊特”、“纪尧姆”、“尼古拉斯”、“约瑟夫”]； 返回{ 限制：“A”， 要求：'ngModel'， 链接：功能（范围、IELENT、iAttrs）{ 自动完成({ 资料来源：姓名， onSelect:function（）{ $timeout（函数（）{ iElement.trigger（'input'）； }, 0); } }); } }; }); 它正在工作，但自动完成框会在弹出窗口后打开。 有人能提出解决方案吗？

试试这个

Html

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

---

如果只需要角度，则下面是纯角度自动完成的示例

JS:

HTML:

清楚的


{{name}}

---

您可以选中fiddle

使用此代码自动完成：

<div>
  <input type="text" placeholder="Search for UserName" class="form-control" ng-keydown="checkKeyDown($event)" ng-keyup="checkKeyUp($event)"

{{建议}

您的jQuery代码：

//Function To Call On ng-change
$scope.search = function () {
    $scope.searchItems = $rootScope.users;

    //Sort Array       
    $scope.searchItems.sort();
    //Define Suggestions List
    $scope.suggestions = [];
    //Define Selected Suggestion Item
    $scope.selectedIndex = -1;
    $scope.suggestions = [];
    var myMaxSuggestionListLength = 0;
    for (var i = 0; i < $scope.searchItems.length; i++) {
        var searchItemsSmallLetters = angular.lowercase($scope.searchItems[i].UserID);
        var searchTextSmallLetters = angular.lowercase($scope.Filters.UserId);
        if (searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1) {
            $scope.suggestions.push(searchItemsSmallLetters);
            myMaxSuggestionListLength += 1;
            if (myMaxSuggestionListLength == 10) {
                break;
            }
        }
    }
}

//Keep Track Of Search Text Value During The Selection From The Suggestions List  
$scope.$watch('selectedIndex', function (val) {
    if (val !== -1 && val != undefined) {
        $scope.Filters.UserId = $scope.suggestions[$scope.selectedIndex];
    }
});

//Text Field Events
//Function To Call on ng-keydown
$scope.checkKeyDown = function (event) {
    if (event.keyCode === 40) {//down key, increment selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex + 1 !== $scope.suggestions.length) {
            $scope.selectedIndex++;
        }
    } else if (event.keyCode === 38) { //up key, decrement selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex - 1 !== -1) {
            $scope.selectedIndex--;
        }
    } else if (event.keyCode === 13) { //enter key, empty suggestions array
        event.preventDefault();
        $scope.suggestions = [];
    }
}

//Function To Call on ng-keyup
$scope.checkKeyUp = function (event) {
    if (event.keyCode !== 8 || event.keyCode !== 46) {//delete or backspace
        if ($scope.Filters.UserId == "") {
            $scope.suggestions = [];
        }
    }
}
//======================================

//List Item Events
//Function To Call on ng-click
$scope.AssignValueAndHide = function (index) {
    $scope.Filters.UserId = $scope.suggestions[index];
    $scope.suggestions = [];
}
//======================================
//User Autocomplete end

//调用ng change的函数
$scope.search=函数（）{
$scope.searchItems=$rootScope.users；
//排序数组
$scope.searchItems.sort（）；
//定义建议列表
$scope.suggestions=[]；
//定义所选建议项
$scope.selectedIndex=-1；
$scope.suggestions=[]；
var myMaxSuggestionListLength=0；
对于（变量i=0；i<$scope.searchItems.length；i++）{
var searchItemsSmallLetters=angular.lowercase（$scope.searchItems[i].UserID）；
var searchtextsallletters=angular.lowercase（$scope.Filters.UserId）；
if（searchItemsSmallLetters.indexOf（searchTextSmallLetters）！=-1）{
$scope.suggestions.push（searchItemsSmallLetters）；
myMaxSuggestionListLength+=1；
如果（myMaxSuggestionListLength==10）{
打破
}
}
}
}
//在从建议列表中进行选择的过程中跟踪搜索文本值
$scope.$watch（'selectedIndex'，函数（val）{
如果（val！=-1&&val！=未定义）{
$scope.Filters.UserId=$scope.suggestions[$scope.selectedIndex]；
}
});
//文本字段事件
//函数调用ng keydown
$scope.checkKeyDown=函数（事件）{
如果（event.keyCode==40）{//down键，则递增selectedIndex
event.preventDefault（）；
if（$scope.selectedIndex+1！==$scope.suggestions.length）{
$scope.selectedIndex++；
}
}否则如果（event.keyCode==38）{//up键，则减量选择dex
event.preventDefault（）；
如果（$scope.selectedIndex-1！=-1）{
$scope.selectedIndex--；
}
}else如果（event.keyCode==13）{//enter key，空数组
event.preventDefault（）；
$scope.suggestions=[]；
}
}
//调用ng keyup的函数
$scope.checkKeyUp=函数（事件）{
如果（event.keyCode！==8 | | event.keyCode！==46）{//删除或退格
如果（$scope.Filters.UserId==“”）{
$scope.suggestions=[]；
}
}
}
//======================================
//列表项事件
//函数调用ng click
$scope.AssignValueAndHide=函数（索引）{
$scope.Filters.UserId=$scope.suggestions[index]；
$scope.suggestions=[]；
}
//======================================
//用户自动完成端
这里没有足够的信息。你能提供一个吗？我试过了，但自动完成框仍然在弹出框后面。有人能建议如何将z索引值添加到自动完成框中吗？选择时打开…？我试过这个很好，但告诉你如何增加自动完成弹出列表的z索引值
<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        <button ng-click="clearList()">Clear
        </button>
        <ul ng-show="showlist">
            <li ng-repeat="name in names | filter: selected" ng-click="selectedItem($event, name)">
              {{name}}
            </li>
        </ul>
    </div>
</div>

<div>
  <input type="text" placeholder="Search for UserName" class="form-control" ng-keydown="checkKeyDown($event)" ng-keyup="checkKeyUp($event)"

//Function To Call On ng-change
$scope.search = function () {
    $scope.searchItems = $rootScope.users;

    //Sort Array       
    $scope.searchItems.sort();
    //Define Suggestions List
    $scope.suggestions = [];
    //Define Selected Suggestion Item
    $scope.selectedIndex = -1;
    $scope.suggestions = [];
    var myMaxSuggestionListLength = 0;
    for (var i = 0; i < $scope.searchItems.length; i++) {
        var searchItemsSmallLetters = angular.lowercase($scope.searchItems[i].UserID);
        var searchTextSmallLetters = angular.lowercase($scope.Filters.UserId);
        if (searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1) {
            $scope.suggestions.push(searchItemsSmallLetters);
            myMaxSuggestionListLength += 1;
            if (myMaxSuggestionListLength == 10) {
                break;
            }
        }
    }
}

//Keep Track Of Search Text Value During The Selection From The Suggestions List  
$scope.$watch('selectedIndex', function (val) {
    if (val !== -1 && val != undefined) {
        $scope.Filters.UserId = $scope.suggestions[$scope.selectedIndex];
    }
});

//Text Field Events
//Function To Call on ng-keydown
$scope.checkKeyDown = function (event) {
    if (event.keyCode === 40) {//down key, increment selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex + 1 !== $scope.suggestions.length) {
            $scope.selectedIndex++;
        }
    } else if (event.keyCode === 38) { //up key, decrement selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex - 1 !== -1) {
            $scope.selectedIndex--;
        }
    } else if (event.keyCode === 13) { //enter key, empty suggestions array
        event.preventDefault();
        $scope.suggestions = [];
    }
}

//Function To Call on ng-keyup
$scope.checkKeyUp = function (event) {
    if (event.keyCode !== 8 || event.keyCode !== 46) {//delete or backspace
        if ($scope.Filters.UserId == "") {
            $scope.suggestions = [];
        }
    }
}
//======================================

//List Item Events
//Function To Call on ng-click
$scope.AssignValueAndHide = function (index) {
    $scope.Filters.UserId = $scope.suggestions[index];
    $scope.suggestions = [];
}
//======================================
//User Autocomplete end