integrate enter keyword

not working

by thatgreg

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>510k Database // Enter Keyword
<input id="device_name" />
</label>
<div class='error'></div>
<button id='echo'>Click me</button>



<hr>
<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Applicant</th>
        <th>K Number</th>
        <th>Clearance Type</th>
        <th>Product Code</th>
        <th>Regulation Number</th>
        <th>Device Name</th>
        <th>Advisory Committee</th>
        <th>Date Received</th>
        <th>Decision Date</th>
        <th>Decision Code</th>
        <th>Expidited Review Flag</th>
        <th>Third Party Flag</th>
        <th>Device Class</th>
        <th>Statement or Summary</th>
        <th>Review Advisory Committee</th>
        <th>Decision Description</th>
        <th>Country Code</th>
        <th>State</th>
        <th>Address</th>
        <th>City</th>
        <th>Contact</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
      </tr>
    </tfoot>
  </table>
</div>

CSS

/* CSS styles */
h1 {
font-family: Impact, sans-serif;
color: #CE5937;
}

JavaScript

$(document).ready(function() {
  $('#echo').click(function() {
    $('.error').empty();
    let device_name = $('#device_name').val().trim();
    if (!keyword) return $(this).prev('.error').html("Please enter a keyword first");
    console.log(`The keyword is ${device_name}`);

  var table = $('#example').DataTable({
    ajax: {
      url: `https://api.fda.gov/device/510k.json?search=device_name:${device_name}&limit=1000`,
      cache: true,
      dataSrc: function(response) {
        return response.results.map(function(record) {
          if (record.openfda) {
            record.regulation_number = record.openfda.regulation_number || '';
            record.device_class = record.openfda.device_class || '';
            delete record.openfda;
          }
          return record;
        });
      }
    },
    columns: [
      { data: 'applicant' },
      { data: 'k_number' },
      { data: 'clearance_type' },
      { data: 'product_code' },
      { data: 'regulation_number' },
      { data: 'device_name' },
      { data: 'advisory_committee_description' },
      { data: 'date_received' },
      { data: 'decision_date' },
      { data: 'decision_code' },
      { data: 'expedited_review_flag' },
      { data: 'third_party_flag' },
      { data: 'device_class' },
      { data: 'statement_or_summary' },
      { data: 'review_advisory_committee' },
      { data: 'decision_description' },
      { data: 'country_code' },
      { data: 'state' },
      { data: 'address_1' },
      { data: 'city' },
      { data: 'contact' },
    ],
    buttons: [{
        extend: 'copyHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'excelHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'csvHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'pdfHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
  ...