How load the json to use this auto-complete

[shivsuthanmhub]

Hi Team,

I used this valuable plugin for my ionic angular application and it's looking and working good. But when I was trying to load the key-value pair json it's not worked properly. Please find the below workouts.

HTML

<label class="item item-input">
                    <span class="input-label">Multiple select autocomplete</span>
                    <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off"
                    ng-model="model"
                    item-value-key="value"
                    item-view-value-key="label"
                    items-method="getTestItems(query)"
                    items-method-value-key="items"
                    placeholder="Enter test query ..."
                    items-clicked-method="itemsClicked(callback)"
                    items-removed-method="itemsRemoved(callback)"
                    max-selected-items="1"
                    />
                </label>

Angular

            $scope.optionList = [
                                 {
                                 label: 'India',
                                 value: 'IND'
                                 },
                                 {
                                 label: 'United States',
                                 value: 'US'
                                 },
                                 {
                                 label: 'United Arab Emirates',
                                 value: 'UAE'
                                 },
                                 {
                                 label: 'South Africa',
                                 value: 'SA'
                                 },
                                 {
                                 label: 'Delhi',
                                 value: 'DL'
                                 },
                                 {
                                 label: 'Tamilnadu',
                                 value: 'TN'
                                 },
                                 {
                                 label: 'Chennai',
                                 value: 'CH'
                                 },
                                 {
                                 label: 'Madurai',
                                 value: 'MA'
                                 },
                                 {
                                 label: 'Nagercoil',
                                 value: 'NGL'
                                 },
                                 {
                                 label: 'Trinelveli',
                                 value: 'TL'
                                 },
                                 {
                                 label: 'Trichy',
                                 value: 'TY'
                                 },
                                 {
                                 label: 'Pondicherry',
                                 value: 'PY'
                                 }

                                 ];

            $scope.getTestItems = function (query) {

            if (query) {
            return {
            items: $scope.optionList
            };
            }
            return {items: []};
            };

// After clicking the data from the auto complete I want to get the value of the selected item here that's too working fine.

            $scope.itemsClicked = function (callback) {
            $scope.clickedValueModel = callback;
            $scope.alertData = JSON.stringify($scope.clickedValueModel.selectedItems.value);
            alert($scope.alertData);
            };
            $scope.itemsRemoved = function (callback) {
            $scope.removedValueModel = callback;

            };

But the issues I faced was while parsing the json response to auto complete the search it's not worked. Please find the attached snapshot you will get more idea. please help me to solve this issues and correct me If I did any wrong.

[guylabs]

Hi @shivsuthanmhub

cool to hear that you use the component for your projects. Well you need to implement your search logic by yourself in the getTestItems(query) method. Normally you pass the query string to a backend service and it returns the values based on that search query. In your case you need to filter through your static JSON by yourself and return the proper values according to the search query.

Hope that helps.

Thanks and regards

Guy

[shivsuthanmhub]

Hi @guylabs happy to see your quick replies. Actually, I handled the functionality using like below.

            $scope.getTestItems = function (query) {
            if (query) {
            return {
            items: $filter('filter')($scope.MYJSONDATA,query)
            };
            }
            return {items: []};
            };

After solving this issues, I'm facing one more challenge!!! Is it possible to show all my JSON value before typing the character in the search box, Because when I was opened the modal window it's empty I meant the list view is empty I want to fill all the JSON value from the initial time itself after that user wants to type search or else they can directly scroll and choose their known values.

[guylabs]

Hi @shivsuthanmhub,

Have a look at the documentation here: https://github.com/guylabs/ion-autocomplete#the-items-method as there the isInitializing flag is described and this is exactly for that use case. When this is true you need to return the whole list and then it is shown properly.

[guylabs]

Hi @shivsuthanmhub

any news on this? I will close the issue due to inactiviti and you can reopen it again if there is something unclear.

Thanks and regards

Guy