JHipster autocomplete combobox

entity-dialog.controller.js

$scope.loadOtherEntities = function(searchQuery) {
    if (searchQuery){
        OtherEntitySearch.query({query: '*' + searchQuery + '*'}, function(result) {
            $scope.otherEntities = result;
        }, function(response) {
            if(response.status === 404) {
                $scope.otherEntities = OtherEntity.query({isActive: true});
            }
        });
    } else {
        $scope.otherEntities = OtherEntity.query({isActive: true});
    }
};

entity-dialog.html

<div class="form-group">
    <label class="control-label" translate="jhApp.entity.otherEntity">otherEntity</label>
    <ui-select reset-search-input="false" ng-model="entity.otherEntity">
        <ui-select-match allow-clear="true">
            <span ng-bind="$select.selected.name"></span>
        </ui-select-match>
        <ui-select-choices refresh="loadOtherEntities($select.search)" refresh-delay="200"
                           repeat="item in (otherEntities) track by item.id">
            <span ng-bind="item.name"></span>
        </ui-select-choices>
    </ui-select>
</div>

@geraldhumphries, I am using Jhipster generator. I have an issue with the pagination size=20 in the drop down list.

I followed your instructions
Step1: bower install --save angular-ui-select
Step2: Import by adding the below line in index.html

<script src="bower_components/angular-ui-select/dist/select.js"></script>

Step3: Added 'ui.select' in the app.module.js
Step4: Used your sample code in my entity-dialog.controller.js and entity-dialog.html

nothing is pre populated in the select box and I am seeing the error below in the console.

Your help would be appreciated.

@SWEnthusiast I am going to guess you are using a new version of JHipster. In the newer versions, the AngularJS code was refactored so $scope isn't used any more. In your controller you should have var vm = this;, with your data bound to vm. You need to change my code to use vm instead of $scope.

You don't need to manually add the line to index.html, in newer versions of JHipster this is handled by Gulp.

I recommend you also follow this gist to get proper autocomplete support in Elasticsearch: https://gist.github.com/geraldhumphries/53762ce4822f22984060bf1d5cc99505

You will need to modify my code further if you do that - I think {query: '*' + searchQuery + '*'} needs to be changed to {query: 'name.autocomplete:' + searchQuery} but I can't confirm. I'm using a proper term ES query whereas that's just a simpleQueryString query.

In the original issue, @deepu105 mentioned that ui-select is buggy and hard to manage. I agree with him and recommend you use something else. I haven't had time to change to something else in my app so I can't give any suggestions.

The pattern used in my code is also old. Instead of $scope.loadOtherEntities = function(searchQuery) { you should do this:

vm.loadOtherEntities = loadOtherEntities;

...

function loadOtherEntities(searchQuery) {
...
}

I believe this matches the pattern that JHipster now uses.

@geraldhumphries Thanks for your response. I will try it and let you know.

The requirement changed due to the complexity. Now they asked me to filter the pre populated results based on the query parameter that is selected on the top drop down.

Here is how it looks

The requirement is when the user selects the country 'US' I have to show only the states in 'US' in the States drop down. Please let me know if you have any sample projects in this scenario using Jhipster.

Thank you!