feat: implement searchable selects for bidder and item lookups using Select2

resources/views/winners.blade.php

@@ -1,5 +1,22 @@
 @extends('layouts.app')
 
+@push('styles')
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+  .select2-container .select2-selection--single {
+    height: 34px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 34px;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 32px;
+  }
+</style>
+@endpush
+
 @section('content')
 <div class="container">
   <div class="row">
@@ -14,7 +31,7 @@
               <label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label">
                 Item Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winneritemnum" id="winneritemnum" required class=form-control>
                   <?php echo App\Helpers\ItemSelectList::itemShowNumbers(); ?>
                 </select>
@@ -24,7 +41,7 @@
               <label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label">
                 Bidder Number:
               </label>
-              <div class=col-sm-2>
+              <div class=col-sm-4>
                 <select name="winnerbiddernum" id="winnerbiddernum" required class=form-control>
                   <?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?>
                 </select>
@@ -50,3 +67,20 @@
   </div>
 </div>
 @endsection
+
+@push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#winnerbiddernum').select2({
+        placeholder: "Select a bidder",
+        allowClear: true
+    });
+    // Also making item number searchable as it's generally expected for "typed in" lookups
+    $('#winneritemnum').select2({
+        placeholder: "Select an item",
+        allowClear: true
+    });
+});
+</script>
+@endpush