AngularJs ng-model does not work with jQuery autocomplete

Question

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

I am implementing the typeahead function. It seems that ng-model does not work with autocomplete.

Here is my code.

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

When I type DAL in the input and select DALLAS, TX from the dropdown list, I actually get DAL for ng-model. Anyone has a solution? Thanks in advance.

@DanielHigueras This is for typeahead feature. Because I am doing company project, so I cannot use Angular Bootstrap, that's why I use jQuery autocomplete. — Ealon
– Ealon, Commented Feb 17, 2016 at 21:11

Ealon · Accepted Answer · 2016-02-17 21:58:16Z

1

I have to create a directive for this.

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

answered Feb 17, 2016 at 21:58

Ealon

4,9389 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs ng-model does not work with jQuery autocomplete

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related