AngularJs ng-model 不适用于 jQuery 自动完成答案

【问题标题】：AngularJs ng-model does not work with jQuery autocompleteAngularJs ng-model 不适用于 jQuery 自动完成
【发布时间】：2016-02-17 21:04:48
【问题描述】：

JSFiddle：https://jsfiddle.net/ealonwang/7y25ru40/

我正在实现typeahead 函数。似乎ng-model 不适用于autocomplete。

这是我的代码。

HTML：

<input type="text" id="origin" ng-model="searchForm.origin" placeholder="City, State">

AngularJS：

var origin = ["DALLAS, TX", "DALLAS, NE"];

$("#origin").autocomplete({
     source: origin,
     autoFocus: true,
     delay: 0,
     minLength: 3
 });

当我在输入中输入DAL 并从下拉列表中选择DALLAS, TX 时，我实际上得到了DAL 对应的ng-model。有人有解决方案吗？提前致谢。

【问题讨论】：

为什么不使用特定角度的下拉菜单？
@DanielHigueras 这是用于预输入功能。因为我在做公司项目，所以我不能使用 Angular Bootstrap，这就是我使用 jQuery autocomplete 的原因。
也许这有助于stackoverflow.com/questions/12959516/…

标签： javascript jquery angularjs

【解决方案1】：

我必须为此创建一个指令。

app.directive("autoComplete", function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element) {
                var location = ["OMAHA, NE", "OMAHA, TX", "DALLAS, TX", "DALLAS, NE"];

                element.autocomplete({
                    source: location,
                    autoFocus: true,
                    delay: 0,
                    minLength: 3,
                    select: function () {
                        $timeout(function () {
                            element.trigger("input");
                        }, 0);
                    }
                });
            }
        }
    });

【讨论】：