New feature: allow displaying information when there is no record found

[khanhto]

I'm using ui-select in my project as it's a cool component. In my project, I really need the ability to show information when there is no record found. Looks like it's not implemented yet so I'm pushing this pull request for discussion.

I would like to create a separate directive (uiSelectNoChoice) to specify a template to be displayed when there is no record.

We can use it like this:

 <ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;"
             title="Choose an address">
    //remove others for a clearer view
    <ui-select-no-choice>
      <div style="text-align: center;">There is nothing to show</div>
    </ui-select-no-choice>
  </ui-select>

At the moment, I only implement it for bootstrap theme (for discussion purpose). If you guys think this is desirable and agree with the approach, we will go ahead with select2 and selectize theme.

Regards,
Khanh

[rysilva]

Thanks, I need this functionality as well. I was thinking of using a single read-only choice as a workaround.

Lots of tickets related to this: #121 #831 #615 #152

I wonder if it would make sense to genericize this as a non-selectable static choice instead of adding a new top-level directive, as discussed in this issue: #152

Like maybe

  <ui-select-choices>
    <li repeat="person in people | filter:$select.search">{{person.name}}</li>
    <li ng-if="canAddNew">Add {{$select.search}}</li>
    <li ui-select-no-choices>There are no choices!</li>
  </ui-select-choices>

[khanhto]

Maybe it makes sense to separate the two.
We may have different templates for them.

Separating the two makes the code clearer and easier to maintain. They are really 2 different cases which should be handled separately. Do you agree?

[rysilva]

Personally I could work with either. I don't know the ui-select codebase so I can't really comment on what's the better implementation design. But yes, semantically I think a "no results" message isn't really a search choice.

Another way to look at this would be the ability to template the search choice dropdown itself, and by doing so add custom text to the dropdown below the choices. This could be used both for no results state and for if you wanted to add static help text even when there are results.

This might be useful to me because I use refresh to validate the user input and provide a search choice only if the input is valid. So for entering IP addresses, a choice will only be generated if the text is a valid IP. If not, we would display the empty message: "Please enter a valid IPv4 or IPv6 address". But even if there are results, it might be useful to still display a message like "IPv4 and IPv6 addresses are allowed".

[euzureau]

Nice! We could really use this in our project -- for now we're using a workaround with a flagged "no results" item, very sub-optimal.

[GreenFomo]

Would be great if this PR would be merged, it seems like such a basic function missing from this otherwise great plugin..

on a more general note, is this plugin still maintained? PRs and issues seem to be piling up. @dimirc

[KatelynL]

+1

[aszmyd]

+1

[awerlang]

@euzureau if there's only this flagged item, and user tabs out, the component select this instead of doing nothing, which is clearly a bug. How do you handle it?

[awerlang]

Can I ask you why do you have this removeAttr(...) two identical times?

[khanhto]

that was a mistake, pushed another commit.

[aszmyd]

@awerlang I belive they could manually remove this element after selection - user selects, on-select event fires some method that checks selected item and remove it from model if needed.

[euzureau]

@awerlang Thanks for pointing that out -- we had a nasty hack in there to block the click but I didn't think about the tab out. I just fixed that now by adding a little conditional in the on-select. If the no-results flag was selected, $select.selected = undefined. Thanks! :-)

[awerlang]

Not sure why, but resetting the model as suggested by @aszmyd didn't work, but @euzureau fix works most of the time. If user tabs out fast, while refresh not finished yet, the problem persists. But I guess this is good enough.

I could use some fork like #1011 or #1075 but would like to stick with the official release.

[Squeezya]

How can we use this?

[willianribeiro]

+1

[jitendersandhu]

+1

[fabiowitt]

+1

[eran10]

+1

[bubenshchykov]

+1

[danijelmaric]

+1

[aaronroberson]

@khanhto can you add documentation and squash these commits?

[styopdev]

+1

[wesleycho]

This is a nifty feature - I would recommend adding a test for this.

[khanhto]

@aaronroberson : How to squash the commit? Sorry, this is the first time I create a pull request.
@wesleycho : Can we create a test later? This pull request has been there for quite so long.

[aaronroberson]

@khanhto Here is a good walkthrough:

http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html

Congrats on making your first PR!

[khanhto]

@aaronroberson I did not know that. I squashed the commits. Looks like we could also use "git reset" for that.

Thanks

[aaronroberson]

I would really like to see some test coverage for this feature but since it is optional and innocuous I'm going to merge it in now and hope that someone will create another PR for the tests (@styopdev @KatelynL @rysilva @euzureau @rzv01).

[user378230]

The wiki needs updating too https://github.com/angular-ui/ui-select/wiki

[aaronroberson]

@user378230 and @wesleycho I went ahead and merged this in but will wait on a PR from the community for updates to the wiki and a PR for the unit tests before releasing.

[tannerlinsley]

@aaronroberson I added some quick docs in the wiki for the new directive.

[tannerlinsley]

All that's left is the tests, but I'm pretty short on time. Maybe in a few weeks haha.

[styopdev]

Where you planned to release this feature? I really need it in my project.

[aaronroberson]

Thanks @tannerlinsley! @styopdev just waiting for unit tests.

[MEGApixel23]

While this feature is not in available you can use "ui-disable-choice" directive.
Example (list of items is added from AJAX-search):

<ui-select ng-model="someModel">
    <ui-select-match><% $item.name %></ui-select-match>
    <ui-select-choices repeat="item in items track by $index" ui-disable-choice="item.id === undefined">
        <span ng-if="item.id"><% item.name %></span>
        <span ng-if="item.id === undefined">No results...</span>
    </ui-select-choices>
</ui-select>

$http.get('/user/search', {
    params: someSearchParams
}).then(function(response) {
    if (response.data.length === 0) {
        $scope.items = [{name: 'No results...'}];
    } else {
        $scope.items = response.data;
    }
});

The purpose of the code above is to insert item without id if there is no data. Then with directive ui-disable-choice="item.id === undefined" we set this option disabled so one can't select it.
I hope it helps somebody :)

[styopdev]

@MEGApixel23 Thanks for reply, I knew about this solution, but I had to change parent li and a styles, I have changed template using $templateCache and it solved my problem.

[MEGApixel23]

@styopdev Could you provide an example, please? It looks like an interesting solution.

[styopdev]

@MEGApixel23 I have copied template that I need from source code to my .js file
https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L2076
And added
<li ng-show=\"!$select.items[0].email\" class=\"no-result ui-select-choices-group\"><span>No matching <span ng-bind=\"$select.search\"> users found. </span></li>
this code in the end of template, before </ul>

angular.module("ui.select").run(["$templateCache", function ($templateCache) {
  $templateCache.put("bootstrap/choices.tpl.html", "template code here..   My code here  </ul>");
}]);

[andrewboni]

nice job on this. did anyone make progress on a selectize compatible version?