1

I am using select field from ui-select library. I am able to select the options or enter a new one. When I enter a new one and try to edit it by clicking on the field again the manually entered value is gone. Is there anyway available so that I can retain the manually entered value and at the same time edit it as well. I have referred the following stackoverflow question for implementing it. Allow manually entered text in ui-select

HTML

<ui-select ng-model="superhero.selected">
  <ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match>
  <ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
    <div ng-bind="hero"></div>
  </ui-select-choices>
</ui-select>

Controller

$scope.getSuperheroes = function(search) {
 var newSupes = $scope.superheroes.slice();
  if (search && newSupes.indexOf(search) === -1) {
    newSupes.unshift(search);
  }
  return newSupes;
}

There is already a working codepen solution at the following link https://codepen.io/arcotnaresh/pen/bVqqdj

Durga Prasad
  • 25
  • 4

1 Answers1

0

(Updated)

According to the official documentation, you should set the reset-search-input attribute to false like this:

<ui-select ng-model="superhero.selected" reset-search-input="false">
    <!-- ... -->
</ui-select>

See CodePen

P.S: Notice that when some string is typed and selected another element in the list (not the typed one), when click the input again it will be shown the typed string, not the selected element.

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
  • The problem is the select field is going to hold values with longer characters. Can u suggest some other libraries which support this functionality. – Durga Prasad Jul 13 '17 at 15:02
  • Right now I can not recall any other library for this. I suggest you a workaround in this case: on the `on-select` option put a function where you save temporarily the (new typed) selected value, then when the user clicks again on the ui-select, if the current model is not one of the `select-choices` (it means it is the new one), immediately set the text of the ui-select to the previously temporarily saved value. This last part you will have to figure it out yourself because I am a little busy right now, but I will try to make a plnkr for you later in case you're still stuck here. – lealceldeiro Jul 13 '17 at 15:18
  • did u get a chance to modify the things. @lealceldeiro – Durga Prasad Jul 26 '17 at 13:05
  • @DurgaPrasad, please, see my answer edited. According to the ui-select docs, there is a way to do it as I describe. Maybe when checked it last time I did not see it, or maybe they added this later. Anyway, this should do the trick for you – lealceldeiro Jul 28 '17 at 18:05
  • Thanks for the answer. I was able to achieve the same thing couple of days back. I was even able to retain the selected option which was available earlier. There is a function ctrl.activate in select.js. Just setting the value of ctrl.search to ctrl.selected if ctrl.selected is not undefined did the trick. – Durga Prasad Jul 31 '17 at 17:10