ICD autocomplete in patient dashboard

public/css/style.css

@@ -295,3 +295,15 @@ body>nav.navbar {
     padding-top: 10px;
     border-top: 1px solid #ccc;
 }*/
+
+/* override med ac css */
+#searchResults {
+    z-index: 100001 !important;
+}
+input.search_field, textarea.search_field {
+    background-position: right 7px center !important;
+    padding-right: 23px !important;
+}
+.ansList:focus, .search_field:focus {
+    background-color: #fff !important;
+}

resources/views/app/patient/dashboard.blade.php

@@ -434,8 +434,8 @@
                             <form url="/api/clientInfoLine/create">
                                 <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                                 <input type="hidden" name="category" value="dx">
-                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Title"></div>
                                 <div class="mb-2"><input type="text" class="form-control form-control-sm" name="ICD" value="" placeholder="ICD"></div>
+                                <div class="mb-2"><input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Title"></div>
                                 <div class="mb-2">
                                     <select name="Chronic or Acute" class="form-control form-control-sm pl-1">
                                         <option>Chronic or Acute (select one)</option>
@@ -447,8 +447,8 @@
                                 <div class="mb-2"><textarea type="text" class="form-control form-control-sm" name="Treatment Goal" value="" placeholder="Treatment Goal"></textarea></div>
                                 <div class="mb-2"><textarea type="text" class="form-control form-control-sm" name="Treatment Plan" value="" placeholder="Treatment Plan"></textarea></div>
                                 <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                    <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                                 </div>
                             </form>
                         </div>
@@ -506,10 +506,10 @@
                                                         <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                                                         <input type="hidden" name="category" value="dx">
                                                         <div class="mb-2">
-                                                            <input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="Title">
+                                                            <input type="text" class="form-control form-control-sm" name="ICD" value="{{ getVal($line->contentDetail, "ICD") }}" placeholder="ICD">
                                                         </div>
                                                         <div class="mb-2">
-                                                            <input type="text" class="form-control form-control-sm" name="ICD" value="{{ getVal($line->contentDetail, "ICD") }}" placeholder="ICD">
+                                                            <input type="text" class="form-control form-control-sm" name="contentText" value="{{$line->contentText}}" placeholder="Title">
                                                         </div>
                                                         <div class="mb-2">
                                                             <select name="Chronic or Acute" class="form-control form-control-sm pl-1">
@@ -528,16 +528,18 @@
                                                             <textarea type="text" class="form-control form-control-sm" name="Treatment Plan" placeholder="Treatment Plan">{{ getVal($line->contentDetail, "Treatment Plan") }}</textarea>
                                                         </div>
                                                         <div class="d-flex align-items-center">
-                                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                                            <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
+                                                            <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                                                         </div>
                                                     </form>
                                                 </div>
-                                                <span class="font-weight-bold">{{$line->contentText}}</span>
-                                                <span class="text-secondary mx-1">/</span>
-                                                <span class="text-secondary">{{ getVal($line->contentDetail, "Chronic or Acute") }}</span>
-                                                <span class="text-secondary mx-1">/</span>
-                                                <span class="text-secondary">ICD: {{ getVal($line->contentDetail, "ICD") ? getVal($line->contentDetail, "ICD") : '-' }}</span>
+                                                <div>
+                                                    <span class="font-weight-bold">{{$line->contentText}}</span>
+                                                    <span class="text-secondary mx-1">/</span>
+                                                    <span class="text-secondary">{{ getVal($line->contentDetail, "Chronic or Acute") }}</span>
+                                                    <span class="text-secondary mx-1">/</span>
+                                                    <span class="text-secondary">ICD: {{ getVal($line->contentDetail, "ICD") ? getVal($line->contentDetail, "ICD") : '-' }}</span>
+                                                </div>
                                             </div>
                                         </td>
                                     </tr>
@@ -1254,4 +1256,29 @@
         </div>
 
     </div>
+    <script>
+        (function() {
+            function init() {
+                $('input[type="text"][name="ICD"]').each(function() {
+                    var elem = this, dynID = 'icd-' + Math.ceil(Math.random() * 1000000);
+                    $(elem).attr('id', dynID);
+                    new window.Def.Autocompleter.Search(dynID,
+                        'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name',
+                        {
+                            tableFormat: true,
+                            valueCols: [0],
+                            colHeaders: ['Code', 'Name'],
+                        }
+                    );
+                    window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                        var autocomp = elem.autocomp;
+                        var name = autocomp.getSelectedItemData()[0].data['name'];
+                        $(elem).closest('form').find('[name="contentText"]').val(name);
+                        return false;
+                    });
+                });
+            }
+            addMCInitializer('patient-single', init);
+        })();
+    </script>
 @endsection

resources/views/layouts/template.blade.php

@@ -49,6 +49,10 @@
     <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
     <script src="/js/yemi.js?_=4" type="application/javascript"></script>
 
+    {{-- med ac --}}
+    <link href='https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.2/autocomplete-lhc.min.css' rel="stylesheet">
+    <script src='/js/autocomplete-lhc.js'></script>
+
     @yield('head')
 </head>