change drop down selects

Author: GrahamHNHSBSA

app/views/ohs-record-search-for-record.html

@@ -83,7 +83,7 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
         <div class="nhsuk-grid-column-three-quarters">
             <details class="nhsuk-details nhsuk-expander">
                 <summary class="nhsuk-details__summary">
-                    <span class="nhsuk-details__summary-text">
+                    <span class="nhsuk-details__summary-text" style="font-size: 1.1875rem;">
                         Edit search
                     </span>
                 </summary>
@@ -100,12 +100,12 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
                                     <label class="nhsuk-label--s nhsuk-u-margin-bottom-1" for="accepted">
                                         First name
                                     </label>
-                                    <input class="nhsuk-input nhsuk-u-width-two-thirds" id="accepted" name="accepted" type="text" value="Graeme">
+                                    <input class="nhsuk-input nhsuk-input--width-20" id="accepted" name="accepted" type="text" value="Graeme">
                                 </div>
 
                                 <div class="nhsuk-form-group">
                                     <label class="nhsuk-label--s nhsuk-u-margin-bottom-1" for="accepted">Last name</label>
-                                    <input class="nhsuk-input nhsuk-u-width-two-thirds" id="accepted" name="accepted" type="text" value="Rutherford">
+                                    <input class="nhsuk-input nhsuk-input--width-20" id="accepted" name="accepted" type="text" value="Rutherford">
                                 </div>
 
 
@@ -153,18 +153,64 @@ <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
                                     <div class="nhsuk-hint">
                                         Reference or National Insurance number.
                                     </div>
-                                    <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contested" name="contested" type="text" value="">
+                                    <input class="nhsuk-input nhsuk-input--width-20" id="contested" name="contested" type="text" value="">
                                 </div>
 
-                                <div class="nhsuk-form-group">
+                                <!--<div class="nhsuk-form-group">
                                     <label class="nhsuk-label--s nhsuk-u-margin-bottom-1" for="contested">
                                         Country of residence (optional)
                                     </label>
                                     <div class="nhsuk-hint">
                                         For example, 'France'
                                     </div>
                                     <input class="nhsuk-input nhsuk-u-width-two-thirds" id="contested" name="contested" type="text" value="">
-                                </div>
+                                </div>-->
+
+                                <div class="nhsuk-form-group">
+                                    <!-- Single selection, auto-complete -->
+                                    <label class="nhsuk-label" id="address-country-label" for="address-country">
+                                        Country of residence (optional)
+                                    </label>
+                                    <div class="nhsuk-hint">
+                                        For example, 'France'
+                                    </div>
+                                    <input class="nhsuk-input nhsuk-input--width-20" list="countries" id="address-country-drop" name="address-country">
+                                    <datalist id="countries">
+                                      <option value="" selected="selected"></option>
+                                      <option value="Austria">Austria</option>
+                                      <option value="Belgium">Belgium</option>
+                                      <option value="Bulgaria">Bulgaria</option>
+                                      <option value="Croatia">Croatia</option>
+                                      <option value="Cyprus">Cyprus</option>
+                                      <option value="Czech Republic">Czech Republic</option>
+                                      <option value="Denmark">Denmark</option>
+                                      <option value="Estonia">Estonia</option>
+                                      <option value="Finland">Finland</option>
+                                      <option value="France">France</option>
+                                      <option value="Germany">Germany</option>
+                                      <option value="Gibraltar">Gibraltar</option>
+                                      <option value="Greece">Greece</option>
+                                      <option value="Hungary">Hungary</option>
+                                      <option value="Iceland">Iceland</option>
+                                      <option value="Ireland">Ireland</option>
+                                      <option value="Italy">Italy</option>
+                                      <option value="Latvia">Latvia</option>
+                                      <option value="Liechtenstein">Liechtenstein</option>
+                                      <option value="Lithuania">Lithuania</option>
+                                      <option value="Luxembourg">Luxembourg</option>
+                                      <option value="Malta">Malta</option>
+                                      <option value="Netherlands">Netherlands</option>
+                                      <option value="Norway">Norway</option>
+                                      <option value="Poland">Poland</option>
+                                      <option value="Portugal">Portugal</option>
+                                      <option value="Romania">Romania</option>
+                                      <option value="Slovakia">Slovakia</option>
+                                      <option value="Slovenia">Slovenia</option>
+                                      <option value="Spain">Spain</option>
+                                      <option value="Sweden">Sweden</option>
+                                      <option value="Switzerland">Switzerland</option>
+                                    </datalist>                                                  
+                                  </div>
 
                                 <button class="nhsuk-button nhsuk-button nhsuk-u-margin-bottom-3" data-module="nhsuk-button" type="submit" style="margin-top:20px;">
                                     Search