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

This commit is contained in:
2026-04-25 11:55:52 -04:00
parent ef4ef144a6
commit ddbfc642f2
6 changed files with 161 additions and 5 deletions
@@ -1,5 +1,22 @@
@extends('layouts.app') @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') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -32,3 +49,15 @@
</div> </div>
</div> </div>
@endsection @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() {
$('#checkoutbiddernum').select2({
placeholder: "Select a bidder",
allowClear: true
});
});
</script>
@endpush
+35 -2
View File
@@ -1,5 +1,22 @@
@extends('layouts.app') @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') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -13,7 +30,7 @@
<label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label"> <label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label">
Item Number: Item Number:
</label> </label>
<div class=col-sm-2> <div class=col-sm-4>
<select name="winid" id="winid" required class=form-control> <select name="winid" id="winid" required class=form-control>
<?php echo App\Helpers\WinningBidSelectList::winningBidShowNumbers(); ?> <?php echo App\Helpers\WinningBidSelectList::winningBidShowNumbers(); ?>
</select> </select>
@@ -23,7 +40,7 @@
<label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label"> <label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label">
Bidder Number: Bidder Number:
</label> </label>
<div class=col-sm-2> <div class=col-sm-4>
<select name="winnerbiddernum" id="winnerbiddernum" required class=form-control> <select name="winnerbiddernum" id="winnerbiddernum" required class=form-control>
<?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?> <?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?>
</select> </select>
@@ -49,3 +66,19 @@
</div> </div>
</div> </div>
@endsection @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() {
$('#winid').select2({
placeholder: "Select an item/winner",
allowClear: true
});
$('#winnerbiddernum').select2({
placeholder: "Select a bidder",
allowClear: true
});
});
</script>
@endpush
+2
View File
@@ -12,6 +12,7 @@
<!-- Styles --> <!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
@stack('styles')
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@@ -239,5 +240,6 @@
<!-- Scripts --> <!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script> <script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
</body> </body>
</html> </html>
+30 -1
View File
@@ -1,5 +1,22 @@
@extends('layouts.app') @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') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -15,7 +32,7 @@
Select Bidder Number: Select Bidder Number:
</label> </label>
<div class=col-sm-4> <div class=col-sm-4>
<select name="reprintbiddernum" id="checkoutbiddernum" required class=form-control> <select name="reprintbiddernum" id="reprintbiddernum" required class=form-control>
<?php echo App\Helpers\CheckoutBidderSelectList::checkoutBidderShowNumbers(); ?> <?php echo App\Helpers\CheckoutBidderSelectList::checkoutBidderShowNumbers(); ?>
</select> </select>
</div> </div>
@@ -32,3 +49,15 @@
</div> </div>
</div> </div>
@endsection @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() {
$('#reprintbiddernum').select2({
placeholder: "Select a bidder",
allowClear: true
});
});
</script>
@endpush
+36 -2
View File
@@ -1,5 +1,22 @@
@extends('layouts.app') @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') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -14,7 +31,7 @@
<label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label"> <label for=winneritemnum class="col-sm-3 col-sm-offset-1 control-label">
Item Number: Item Number:
</label> </label>
<div class=col-sm-2> <div class=col-sm-4>
<select name="winneritemnum" id="winneritemnum" required class=form-control> <select name="winneritemnum" id="winneritemnum" required class=form-control>
<?php echo App\Helpers\ItemSelectList::itemShowNumbers(); ?> <?php echo App\Helpers\ItemSelectList::itemShowNumbers(); ?>
</select> </select>
@@ -24,7 +41,7 @@
<label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label"> <label for=winnerbiddernum class="col-sm-3 col-sm-offset-1 control-label">
Bidder Number: Bidder Number:
</label> </label>
<div class=col-sm-2> <div class=col-sm-4>
<select name="winnerbiddernum" id="winnerbiddernum" required class=form-control> <select name="winnerbiddernum" id="winnerbiddernum" required class=form-control>
<?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?> <?php echo App\Helpers\BidderSelectList::bidderShowNumbers(); ?>
</select> </select>
@@ -50,3 +67,20 @@
</div> </div>
</div> </div>
@endsection @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
+29
View File
@@ -1,5 +1,22 @@
@extends('layouts.app') @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') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -32,3 +49,15 @@
</div> </div>
</div> </div>
@endsection @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
});
});
</script>
@endpush