javascript - 我可以用少量代码创建一个自动完成的下拉文本框吗？

Question

我正在尝试使用 angularJs 实现一个自动完成的下拉输入框。是的，在 angular 和 jquery 中都有很多解决方案。但问题是它们对于我需要的东西来说似乎不必要地复杂。到目前为止，我的大部分逻辑都是由非常有限的 Angular 代码开发的，它缺少的是下拉输入框的体面外观。

我有这个简单的指令:

app.directive('autoCompleteBox', function() {
    return { restrict: 'E', 
    templateUrl: '/pathTo/auto-complete-inputbox.html',
    link:function(scope, element, attrs){
        scope.items=JSON.parse(attrs.items);
    }
};

});

模板如下 - 只是一个非常简单的文本框和一个列表，当我在文本框中写入时，我可以使用非常简单的 Angular 过滤代码过滤它们:

<div>
    <input type='text' ng-model='test'>
        <li ng-repeat='item in items | filter:test track by $index '> 
            {{item}}       
        </li>
    </input>
</div>

当我想使用我使用的指令时:

<auto-complete-box items="[myArray]"> </auto-complete-box>

这是我通过这段代码得到的图像。

有什么想法可以让我在这段代码之上添加一个简单干净的可编辑下拉框(没有箭头)，使其成为一个自动完成的下拉框吗？

提前致谢。

Answer 1

使用 angular js ng-autocomplete 模块来添加到下拉文本框的简单指令。

参见 demo