Currently, I am working on a Laravel project using Laravel Mix. I am attempting to create a table with filter functionality. However, when I insert the following code into my TS file:
import $ from 'jquery';
import 'bootstrap';
$(() => {
if ($('#documents-view').length > 0) {
$("#myInput").on("keyup", function() {
var value = $('in').val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
}
});
I encounter the following two errors:
TS2339: Property 'toLowerCase' does not exist on type 'string | number | string[]'. Property 'toLowerCase' does not exist on type 'number'.
and
TS2345: Argument of type '(this: HTMLElement) => void' is not assignable to parameter of type 'string | Element | JQuery<HTMLElement> | Element[] | ((this: HTMLElement, index: number, element: HTMLElement) => boolean)'. Type '(this: HTMLElement) => void' is not assignable to type '(this: HTMLElement, index: number, element: HTMLElement) => boolean'. Type 'void' is not assignable to type 'boolean'.
Below is my frontend code with a table within it:
@extends('client-portal::layouts.default')
@section('content')
<div id="documents-view" class="clients">
<div class="clients-top">
<div class="clients-top__logo">
<img class="clients-top__image" src="{{ asset('vendor/client-portal/images/logo_CRVS.png') }}">
</div>
<div class="clients-top__title">Klantportaal</div>
</div>
@include('client-portal::navbar')
<div class="clients-content">
<div class="col-md-20 offset-md-1 p-3 p-md-5">
<div class="container-fluid">
<div class="row">
<a class="btn btn-primary mb-3 border-white" href="#">
{{ __('Document toevoegen') }}
</a>
<input class="form-control mb-2" id="myInput" type="text" placeholder="Zoeken..">
@if($documents->isEmpty())
<p>Er zijn geen documenten bij ons bekend.</p>
@else
<table class="table table-striped table-bordered bg-white" style="width:100%">
<thead>
<tr>
@foreach($data['documents'] as $document)
<th>{{$document['name']}}</th>
@endforeach
</tr>
</thead>
<tbody id="myTable">
@foreach($documents as $document)
<tr>
@foreach($document as $key => $item)
@foreach($data['documents'] as $keyConfig => $reg)
@if($key === $keyConfig)
<td>{{$item}}</td>
@endif
@endforeach
@endforeach
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
@foreach($data['documents'] as $document)
<th>{{$document['name']}}</th>
@endforeach
</tr>
</tfoot>
</table>
@endif
</div>
</div>
</div>
</div>
</div>
@stop
I am uncertain about the errors in my code. Can anyone assist me with resolving them?