May 16, 2023

How To Create A Search Form That Gets Posts/Contents From Another Website Using HTML

How To
How To Create A Search Form That Gets Posts/Contents From Another Website Using HTML

If you want to create a search form that searches for files on another website, there are a few things you need to consider:

  1. Determine the type of files you want to search for and the website you want to search on.
  2. Identify the search API or search functionality that the website provides. Many websites have APIs or search functionality that you can use to search for files.
  3. Once you have identified the search API or functionality, you can create a form that sends a request to the API or search function with the search query entered by the user.
  4. You will need to parse the response from the search API or search function and display the results in your search form.

Here is an example of how you might create a search form using HTML and JavaScript that searches for PDF files on another website:

<form>
  <label for="search-query">Search for PDF files:</label>
  <input type="text" id="search-query" name="search-query">
  <button type="submit" onclick="searchFiles()">Search</button>
</form>

<div id="search-results"></div>

<script>
function searchFiles() {
  const query = document.getElementById("search-query").value;
  const url = "https://example.com/api/search?query=" + query + "&filetype=pdf";
  
  fetch(url)
    .then(response => response.json())
    .then(data => {
      const results = data.results;
      const resultsHtml = results.map(result => {
        return `<a href="${result.url}">${result.title}</a><br>`;
      }).join("");
      
      document.getElementById("search-results").innerHTML = resultsHtml;
    })
    .catch(error => console.error(error));
}
</script>

This code creates a form with an input field and a submit button. When the user enters a search query and clicks the button, the searchFiles() function is called. This function constructs a URL to search for PDF files on the example.com website, sends a request to the API using the fetch() function, and displays the results in the search-results div. Note that this code assumes that the example.com website has a search API that accepts the query and filetype parameters.

Here is another code below;

<form>
  <label for="search-input">Search for posts:</label>
  <input type="text" id="search-input" name="search-input">
  <button type="submit" onclick="searchPosts()">Search</button>
</form>

<div id="search-results"></div>

<script>
function searchPosts() {
  const query = document.getElementById("search-input").value;
  const url = `https://example.com/api/search?q=${query}&type=post`;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      const results = data.results;
      const resultsHtml = results.map(result => {
        return `<div class="search-result">
                  <h2><a href="${result.url}">${result.title}</a></h2>
                  <p>${result.excerpt}</p>
                </div>`;
      }).join("");

      document.getElementById("search-results").innerHTML = resultsHtml;
    })
    .catch(error => console.error(error));
}
</script>

In this example, the search form has an input field and a submit button. When the user enters a search query and clicks the button, the searchPosts() function is called. This function constructs a URL to search for posts on the example.com website using the fetch() function. The fetch() function sends a request to the API with the search query and the type of content (post). The response is returned as a JSON object, which is then parsed to extract the results.

The results are then displayed in the search-results div using the innerHTML property. The map() method is used to create an HTML string for each search result, which is then joined into a single string using the join() method. The resulting string of HTML is then inserted into the search-results div.

Note that this code assumes that the example.com website has a search API that accepts the q and type parameters. You may need to adjust the code to fit the specific search API you are using. Additionally, the HTML and CSS used to style the search results may need to be modified to match your own website’s design.

In another example, we’ll use a form action to search for posts on another website using the GET method. The search query entered by the user will be included in the URL as a query parameter.

Here’s an example of how the HTML for the search form might look:

<form action="https://example.com/search" method="get">
  <label for="search-input">Search for posts:</label>
  <input type="text" id="search-input" name="q">
  <button type="submit">Search</button>
</form>

In this form, the action attribute specifies the URL of the search endpoint on the example.com website, and the method attribute is set to get to send the search query as a URL parameter. The name attribute of the input field is set to “q”, which is a common convention for search queries.

When the user enters a search query and clicks the “Search” button, the browser will send a GET request to the search endpoint on the example.com website with the search query as a URL parameter.

To display the search results on your own website, you can use JavaScript to intercept the form submission and prevent the browser from navigating to the search results page. You can then use the Fetch API to send a request to the search endpoint, parse the response, and display the search results on your own website.

Here’s an example of how the JavaScript code might look:

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const query = document.getElementById('search-input').value;
  const url = `https://example.com/search?q=${query}`;
  fetch(url)
    .then(response => response.text())
    .then(data => {
      const parser = new DOMParser();
      const html = parser.parseFromString(data, 'text/html');
      const results = html.querySelectorAll('.search-result');
      const resultsHtml = Array.from(results).map(result => result.outerHTML).join('');
      document.getElementById('search-results').innerHTML = resultsHtml;
    })
    .catch(error => console.error(error));
});

This code uses the addEventListener() method to intercept the form submission event. It prevents the default behavior of the event using the preventDefault() method.

The search query entered by the user is extracted from the input field using document.getElementById('search-input').value.

A URL is constructed with the search query as a URL parameter. A fetch request is sent to the search endpoint using the constructed URL.

The response is returned as a text string, which is then parsed into an HTML document using the DOMParser() constructor. The parsed HTML document is then searched for the search result elements using the querySelectorAll() method.

The search result elements are then converted to an array and the HTML for each element is extracted using the outerHTML property. The resulting array of HTML strings is then joined into a single string using the join() method.

The resulting HTML string is then inserted into the search-results div using the innerHTML property.

Note that this code assumes that the search results on the example.com website are contained within HTML elements with a class of search-result. You may need to adjust this code to match the specific search results on the website you are searching.

HTMLJavascript