ERx auto-complete functionality

resources/views/app/patient/partials/erx.blade.php

@@ -50,11 +50,13 @@
             <div class="row mb-2">
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Medication</label>
-                    <input type="text" v-model="popupItem.medication" class="form-control form-control-sm">
+                    <input type="text" data-field="medication"
+                           v-model="popupItem.medication" class="form-control form-control-sm">
                 </div>
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Strength</label>
-                    <input type="text" v-model="popupItem.strength" class="form-control form-control-sm">
+                    <input type="text" data-field="strength"
+                           v-model="popupItem.strength" class="form-control form-control-sm">
                 </div>
             </div>
             <div class="row mb-2">
@@ -175,13 +177,13 @@
                         pharmacyAddressMemo: '',
                         pharmacyPhone: '',
                         pharmacyFax: '',
-                    },
+                    }
                 },
                 methods: {
                     showPopup: function(_name, _item) {
                         closeStagPopup();
                         this.popupMode = _item ? 'edit' : 'add';
-                        this.popupItem = _item ? _item : {
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
                             uid: '',
                             is_open: true,
                             medication: '',
@@ -251,10 +253,40 @@
                         }, function(_data) {
                             fastReload();
                         });
+                    },
+                    initRxAutoSuggest: function() {
+                        let self = this;
+                        $('#erxApp input[type="text"][data-field="medication"]:not([ac-initialized])').each(function() {
+                            let elem = this,
+                                randPart = Math.ceil(Math.random() * 1000000),
+                                dynID = 'rx-' + randPart;
+                            $(elem).attr('id', dynID);
+                            var strengthElem = $(elem).closest('.stag-popup').find('[data-field="strength"]')[0],
+                                dynStrengthsID = 'rx-' + randPart + '-strengths';
+                            $(strengthElem).attr('id', dynStrengthsID);
+                            $(strengthElem).attr('rx-id', dynID);
+                            new window.Def.Autocompleter.Prefetch(dynStrengthsID, []);
+                            new window.Def.Autocompleter.Search(dynID,
+                                'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS');
+                            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                var strengths = acData[0].data['STRENGTHS_AND_FORMS'];
+                                if (strengths) {
+                                    strengthElem.autocomp.setListAndField(strengths, '');
+                                }
+                                self.popupItem.medication = $(elem).val();
+                            });
+                            window.Def.Autocompleter.Event.observeListSelections(dynStrengthsID, function() {
+                                var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                self.popupItem.strength = $(strengthElem).val();
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                            $(strengthElem).attr('ac-initialized', 1);
+                        });
                     }
                 },
                 mounted: function () {
-
+                    this.initRxAutoSuggest();
                 }
             })
         }