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

时间:2016-02-17 21:04:48

标签: javascript jquery angularjs

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。有人有解决方案吗?提前谢谢。

enter image description here

1 个答案:

答案 0 :(得分: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);
                    }
                });
            }
        }
    });