WEBSITE SEARCH

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>


    
  </head>

  <body>
  
  <H1>WEBSITE SEARCH</H1>
  <p>
  This form will search for any file name only in the directory it's in, and will open it when the user clicks submit. You can also change the file extension to be seached by changing the option value in the code. In order to work this needs to be in a local or live server.
  </p>

    <div class="container">
      <form action="" id="search-form">
        <div class="row mb-3">
          <div class="col-md-12 mb-3 mt-3">
            <div class="alert" role="alert" style="margin: 0;display: none;">

            </div>
          </div>
          <div class="col-md-10 mb-2">
            <div class="input-group">

              <div class="input-group">
                <input type="text" class="form-control" id="search-term" placeholder="Type here..." required style="border-radius: 0.25rem;">
                <div class="input-group-append">
                  <select style="display: none;" name="" id="search-file" class="form-select input-group-text d-none" required>
                    <option value="html">.HTML</option>
                  </select>
                </div>
              </div>
            </div>
          </div>


          <div class="col-md-2 mb-2">
            <button type="submit" class="btn btn-primary w-100">SEARCH</button>
          </div>

        </div>
      </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

    <script>
      $(document).ready(function() {
        $('#search-form').submit(function(e) {
          e.preventDefault();

          var filename = String($('#search-term').val()).split(' ').join('-').toLowerCase() + '.' + String($('#search-file').val()).toLowerCase();

          $.ajax({
            url:...

CSS

body {
  font-family: sans-serif;
}