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

Question

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 for ng -模型。有人有解决办法吗？提前致谢。

Answer 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);
                    }
                });
            }
        }
    });