Search code examples
angularjsautocompleteui-select

ui-select-no-choice message is displayed if the text length is zero

I am using ui-select for autocomplete functionality and if there are no results for search criteria then i am using ui-select-no-choice to display message back to the user. 

 <div class="form-group">
    <label class="Label">
      Select details
    </label>
    <ui-select ng-model="configItem.details" id="details" multiple class="form-control" theme="bootstrap" title="Choose details" reset-search-input="true" close-on-select="true" spinner-enabled="true" spinner-class="ui-select-spin">
      <ui-select-match placeholder="Search.." class="ui-select-match">{{$item.Name}}</ui-select-match>
      <ui-select-choices class="ui-select-choices" refresh="details($select.search)" refresh-delay="0" minimum-input-length="3" repeat="detail.ID as detail in details| filter: $select.search | limitTo: 100">
        <div ng-bind-html="detail.Name | highlight: $select.search"></div>
      </ui-select-choices>
      <ui-select-no-choice>
        No Information found
      </ui-select-no-choice>
    </ui-select>
  </div>

 $scope.details = function (search) {
        if (search.length >= 3) {
          AddUpdateService.getAllData(search)
        }
}

Since my dataset is huge i used minimum-input-length="4" so there wouldn't be large results but the problem i am facing is if user doesn't enter any data then ui-select-no-choice message is being displayed which is incorrect. I need to display the message if user types more than 4 character.

Here is the screenshot regarding alignment of x icon

enter image description here

Solution

  • you can make use of ng-class for hiding that as required.

    It is like

    <ui-select-no-choice ng-class="{ 'hide': $select.search.length < 5 }">
        No Information found
      </ui-select-no-choice>

    Here is the demo - https://next.plnkr.co/edit/PjuhUR?preview Hope it helps.

    update:: hiding previous results when nothing is typed

        <ui-select-choices repeat="color in availableColors | filter: $select.search" 
ng-class="{ 'hide': $select.search.length < 1 }">