talentlms_search

by Konstantinos Stratis

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h3>This is the search form</h3>
<hr />
<div>
  <input id="searchArea" type="text" value="" placeholder="Enter your search terms">
  <button id="searchButton">Search</button>
</div>

CSS

#searchArea {
  width: 100%;
  height: 20px;
  border: 1px solid grey;
  border-radius: 2px;
  padding-left: 5px;
}

#searchButton {
  margin-top: 5px;
  padding: 5px;
}

JavaScript

function searchFunction() {
  console.log("This is a POST request being send to the server");
}

$("#searchButton").on("click", function(e) {
  e.preventDefault();
  searchFunction();  
})

$("#searchArea").on("focusout", function(e) {  
  e.preventDefault();
  searchFunction();
});