Question

我已经使用angularJs和jQuery创建了一个自动完成的下拉输入框指令。一切都很好，除了下拉列表一旦我想选择一个项目就消失了。所以这样我就可以在不选择它们的情况下过滤项目，我必须输入整个字符串，在我的情况下恰好很长。

以下是angularjs / jquery代码。它包含两个指令：第一个获取我从laravel接口查询的数据，并可以在html中访问它;第二个是实际的自动完成输入框角度/ jquery指令。这些指令使用服务来处理和传递数据。

var app = angular.module('myApp', [], function() {});

app.factory('sharedProperties', function() {
    var items;
    var newItems = [];
    return {
        getItems: function() {
            for(i in items){
            newItems.push(items[i].country);
            } 
           return newItems;
        },
        setItems: function(value) {
           items = Value;  
        },
    };
});

app.directive('autoCompleteData', function(sharedProperties) {
            return { restrict: 'E', 
                    link:function(scope, element, attrs){
                        scope.items=JSON.parse(attrs.items);
                        sharedProperties.setItems(scope.items);
                      }
                   };
    });




app.directive('autoComplete', function(sharedProperties) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, attrs, ctrl) {
            $(elem).autocomplete({   
            source: sharedProperties.getItems(),
            minLength: 1,
            delay: 300
            });
       }
    };
});

我在html中使用的指令标签是这样的：

<auto-complete-data items="myJsonData"> </auto-complete-data>
<input type="text" auto-complete/>

html链接和脚本：

<link media="all" type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link media="all" type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

这是css代码：

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

  html .ui-autocomplete {
    height: 100px;
  }

我有什么想法可以让这段代码成为像here那样有效的可选下拉输入？

我试图在jsfiddle中创建一个工作代码以供参考，但出于某种原因，我的代码在那里没有用。

为什么我的jquery / angular自动完成输入框不允许从下拉列表中选择？

0 个答案: