Base solution for your next web application
BLACK FRIDAY
From Nov 21
To Dec 1
XXDAYS : XXHRS : XXMIN : XXSEC
SAVE UP TO$3K
Also valid for the
existing customers!
Open Closed

What is the library of the live-search #816


0
sampath created

Hi, Could you tell me which library you're using for below mentioned drop down ? If you can provide any doc reference for that it's highly appreciated. Thanks.

<div class="form-group">
                <label for="LanguageNameSelectionCombobox">@L("Language")</label>
                <select
                    id="LanguageNameSelectionCombobox"
                    class="form-control"
                    ng-options="languageName.value as languageName.displayText for languageName in vm.languageNames"
                    ng-model="vm.language.name"
                    ui-jq="selectpicker"
                    ui-options='{ iconBase: "famfamfam-flag", tickIcon: "fa fa-check" }'
                    ng-change="vm.languageChanged()"
                    data-live-search="true"></select>
            </div>

10 Answer(s)
  • 0
    ismcagdas created
    Support Team

    Hi,

    It's bootstrap select by Silvio Moreto. You can check it's github repository <a class="postlink" href="https://github.com/silviomoreto/bootstrap-select">https://github.com/silviomoreto/bootstrap-select</a>.

  • 0
    sampath created

    Hi, But it is not the angular version no ? Could you tell me the url for the angular version ? Thanks.

  • 0
    ismcagdas created
    Support Team

    Hi,

    This is not angular version actually. But you can use it in Angular by angular ui's uiJq directive. Take a look at here <a class="postlink" href="https://github.com/angular-ui/angular-ui-OLDREPO/tree/master/modules/directives/jq">https://github.com/angular-ui/angular-u ... ectives/jq</a>.

    In our code

    ui-jq="selectpicker"
    

    does the trick.

    Or for a full angular compatible solution you can use angular ui's ui-select. You can find detailed information about ui-select here <a class="postlink" href="https://github.com/angular-ui/ui-select">https://github.com/angular-ui/ui-select</a>.

    I hope these can help you :)

  • 0
    sampath created

    Hi, Thanks a lot :) I'll try the AngularJS-native version.I think it is the best for my job. B'cos I tried it with the Jquery version you have mentioned above.But it doesn't work with the below kind of set up.

    ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities"
    

    It just work only the simple query like this :

    ng-options="a.id as a.name for a in vm.cities"
    

    Do you know any way to sort out this issue or is this the limitation of the uiJq directive ? Thanks.

    This is the drop down I need :

  • 0
    ismcagdas created
    Support Team

    Hi,

    I think this problem is not related to ui-jq. I have tried your syntax and it worked for me.

    ng-options="languageName.value as languageName.displayText + ' | '+  languageName.value for languageName in vm.languageNames"
    

    It might be a browser caching problem. Can you check that ?

  • 0
    sampath created

    Hi, Thanks a lot.It is working.Cheers :)

  • 0
    sampath created

    Hi, Could you tell me why do we need to refresh the drop down as shown below ? Do we need to do that always ? Thanks.

    setTimeout(function () {
          $('#LanguageIconSelectionCombobox').selectpicker('refresh');
          $('#LanguageNameSelectionCombobox').selectpicker('refresh');
          }, 0);
    
  • 0
    hikalkan created
    Support Team

    Since it's a jQuery library and need to be informed that it's content has changed. It's related to the library.

  • 0
    sampath created

    Hi Halil, Yes,that is the case.I think you have selected a wrong api for the Angular SPA.If we access the dom elements within the controller is very BAD practice. It's called angular anti pattern.I hope this must have a performance issues also with the big list of items due to usage of almost dead library such as Jquery. Hope you'll remove this and will use AngularJS native version of search drop downs in your future versions of Asp.net Zero.I'll put an issue about this on Git also.Thanks.

  • 0
    hikalkan created
    Support Team

    We try to select Angular libraries as much as possible. But some jQuery libraries are fairly standard and there is not good Angular alternatives (there are missing features at least). Also, these libraries are better integrated to Metronic UI. Thanks.