How can I get my search bar work with Google?

Question

I have this search bar and I can't connect it to Google as a search functionality, I tried with this guy's code but I couldn't:

<form id="frmSearch" action="index.html" class="searchform order-sm-start order-lg-last">
      <div class="form-group d-flex">
        <input type="text" class="form-control pl-3" placeholder="Buscar">
        <button type="submit" placeholder="txtsearch" class="form-control search"><span class="fa fa-search"></span></button>
      </div>
    </form>

Thanks in advance!

Answer 1

You could use an AJAX call to a php page where you are going to implement cURL to get data from google searching url!

Of course you will need to code your own cURL in PHP: PHP + curl, HTTP POST sample code?

here you can find how to implement it!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

document.addEventListener('DOMContentLoaded', () => {

   const form = document.querySelector("form#frmSearch");
   form.onsubmit = function() {
   
   let keyword = encodeURIComponent(this.querySelector("input#keyword").value);
   
    $.ajax({
      url: `./php_curl_file.php?q=${encodeURIComponent(keyword)}`,
      type: 'GET',
      error: (err) => {
        throw new Error(err);
      },
      success: (searchData) => {
        console.log( searchData ); 
      }
    });
   
    return false;
   }
  
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form id="frmSearch" class="searchform order-sm-start order-lg-last">
  <div class="form-group d-flex">
    <input type="text" id="keyword" class="form-control pl-3" placeholder="Buscar">
    <button type="submit" placeholder="txtsearch" class="form-control search">
      <span class="fa fa-search"></span> Search
    </button>
  </div>
</form>