CODEWITHSUNDEEP
javascriptangularjs
Young
Young

Reputation: 25

typeahead directive in AngularJS to get chain input autofill

I am now trying to write a expression using angularJS, which is like math expression. But I got stuck when I was trying to give suggestion to the operators.

For example, the expression may like this: ABS(x)+Floor(y).

I tried to use the typeahead directive, but suggestion only shows for the ABS(x). When operator "+" and Floor(y) were inputted, there is no suggestion. Here is my code snap. I will be very happy if anyone can help on this. Thanks!

JS:

$scope.explist = ['ABS(x)',  'Floor(y)']

HTML:

<div>
<input type="text" maxlength="100" ng-model="exp" typeahead="e for e in explist | filter:$viewValue | limitTo:8"  />
</div>

Upvotes: 0

Views: 70

Answers (1)

Ed Knowles
Ed Knowles

Reputation: 1925

After reading your comment I think typeahead is the wrong thing to use in your case.

--> see jsbin <--

I suggest using ui-select. You can list your expressions in an array and then build a second array with the selections.

Since you need to use multiple operators you can give the directive a function to display available options. In this example case I've given them

var modifiers = ['/', '+', '-', '*'];

Here is the controller

    $scope.exp.available = ['ABS(x)', 'Floor(y)'];
    $scope.exp.formatted = function () {
        var holder = [];
        angular.forEach($scope.exp.available, function (thing) {
          holder.push(thing);
          for (i = 0; i < modifiers.length; i++) {
                    holder.push(modifiers[i] + thing);
                }
        });
        return holder;
    };

HTML

<ui-select multiple ng-model="exp.expressions" theme="select2" style="width: 300px;">
    <ui-select-match placeholder="Select...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="e in exp.formatted() | filter:$select.search">
      {{e}}
    </ui-select-choices>
  </ui-select>

You will require angular-sanatize, and ui-select. I've created a JSBin here for you http://jsbin.com/paqotiticu/2/edit?html,css,js,output

This is just a start, you can develop the functions to use keypress or remove elements, hope this helps and best of luck!

Upvotes: 1

Related Questions