Editable ComboBox using bootstrap/angularjs

Question

I am not getting any solution for having combobox as select as well as input. That means if user selection in not there in per-populated list , then use should be able to enter his value of choice. users choice (selected or entered) should be set and retrievable as ng-model in angularjs.

thanks

I think you want a directive. Create a fiddler and one can add a directive for you — V31, Feb 07 '14 at 20:21

score 23 · Answer 1 · answered Jul 27 '14 at 00:15

23

ui-select doesn't really look like a proper select we are all used to. So here is what i ended up doing with the help Twitter Bootstrap 3:

http://jsfiddle.net/ruslans_uralovs/2brhd/1/

<div ng-app >
    <div class="row" ng-controller="ExampleController">
        <div class="col-xs-8 col-xs-offset-2">

            <form role="form">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="myColor.name">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-repeat="color in colors" class="input-lg"><a href="#" ng-click="changeColor(color)">{{color.name}}</a></li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</div>

Greetings from Ireland!

answered Jul 27 '14 at 00:15

Ruslans Uralovs

1,122
10
18

1

I like this implement better than the ui-select. This allows true type in where ui-select only do look up. – Leng Oct 10 '14 at 00:13
Like that too better than ui-select. Elegant and easy. – Jürgen Bayer Mar 26 '15 at 18:35
1

This was modifying the original data, so I tweaked it a bit http://jsfiddle.net/ueuo4yho/ – liteflier Jan 05 '16 at 15:39
if we enter new data, the old selected data in dropdown is updated/lost. @liteflier, even your soln doesn't work.. – Deepak Raj Jun 08 '16 at 08:33
1

@Ruslans, this is a nice solution.. just fixed the new data updating dropdown issue here http://jsfiddle.net/3deepak/2brhd/462/ – Deepak Raj Jun 08 '16 at 08:39
@DeepakRaj when i use backspace and remove what i typed in the box, the dropdown list will have a blank spot. is there a fix for that? – bouncingHippo Jun 15 '16 at 13:58

score 14 · Accepted Answer · answered Feb 08 '14 at 18:29

14

The ui-select2 library lets you use select2 through a directive. That provides some great UI elements that do what you're asking for.

In general I also recommend the Angular Modules site to find various useful Angular libraries.

answered Feb 08 '14 at 18:29

Matt Metlis

681
5
9

1

The question is pretty clearly about being able to enter a value that is not on the Select's list. I couldn't see how Select2 would help with that requirement. – CSSian Apr 03 '14 at 05:58
4

As an example visit the select2 link I provided and search for / scroll down to "Tagging Support". From the page: "Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by picking the first choice which is what the user has typed into the search box so far." That's how I use it, it does allow you to enter new values. – Matt Metlis Apr 04 '14 at 12:56
Thanks, Matt. Frankly, the wording of the page you cited is so mangled I misunderstood it. Thanks for the clarity! – CSSian Apr 05 '14 at 02:30
1

Thanks! BTW, [ui-select2 library](https://github.com/angular-ui/ui-select2) has been deprecated and replaced with [ui-select library](https://github.com/angular-ui/ui-select). – Dário Mar 18 '15 at 17:26

score 7 · Answer 3 · answered Dec 02 '15 at 09:35

7

Using html5 you can do this:

    <input type=text list=browsers >
    <datalist id=browsers >
       <option> Google
       <option> IE9
    </datalist>

Got it from here: http://www.scriptol.com/html5/combobox.php

answered Dec 02 '15 at 09:35

Tomas Hesse

385
3
10

Note that this isn't supported on Safari: [https://caniuse.com/#feat=datalist](https://caniuse.com/#feat=datalist) – RichardW Dec 19 '17 at 07:42

score 5 · Answer 4 · answered Mar 23 '15 at 18:32

I also was looking for the same thing and didn't find a good solution, so I ended up creating angular-combo-box directive which lets you do what you are looking for. Here's an example.

angular.module('ngComboBoxExample', ['ngComboBox'])
  .controller('myController', function($scope) {
    $scope.options = [
      'Blue',
      'Red',
      'Pink',
      'Purple',
      'Green'
    ];
    $scope.color = '';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bradleytrager.github.io/angular-combo-box/bower_components/angular-combo-box/dist/angular-combo-box.min.js"></script>

<div ng-app="ngComboBoxExample">
  <div ng-controller="myController">
    <combo-box options="options" combo-model="color" label="--Select a Color--" other-label="A color not on the list...">
    </combo-box>
    <div>Selected Color: <span ng-bind="color"></span>
    </div>
  </div>
</div>

Hope it helps!

This is good, but it lacks the lookup function. And you need two separate fields. — AlexWerz, Apr 07 '15 at 14:11

Editable ComboBox using bootstrap/angularjs

4 Answers4

Linked