Spotlight search on forums

[Niko]

Coucou,

a lot of resources today - I am having fun

Description

The resource allows you to have a Spotlight Search bar - the same that appears on Apple computers - when you try to write something out of an input or textarea field. A popup will appear to allow you to search within your forum's content!

By clicking on the backdrop (out of the popup) or on the close button, you will be back to your regular forum.
You can also exit by clicking ESC on your keyboard

Demonstration

 In the coming weeks, we will also try to implement real-time results without having to change the page.

CSS

In order to design the style of the resource, you need to go towards Administration Control Panel (ACP)  Display  CSS & Colors  CSS Style Sheet and add append the following code:

(You need to reply to the topic in order to see the code resources)

CSS Customization

• Code: #search_hover_page_backdrop

  - customize the backdrop of the popup
  

• Code: #search_hover_page_body

  - customize the popup frame
  

• Code: span.search_hover_close

  - customize the close button
  

Javascript & jQuery

For the next step you need to go towards Administration Control Panel (ACP)  Modules  HTML & Javascript  Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

• Title: free choice - does not influence the code effect
• Where: All pages
• Code:
  

  Code:

  $(function() {

   /*
   Title: Spotlight search on forums
   Author: Niko
   Version: 1.2
   Release Date: 03.06.2023 (dd.mm.year)
   Contact: https://www.fmcodes.net/u2
   Original content: https://www.fmcodes.net/t2038-
   */

   var search_label = "Search"; //button content
   var search_close= "Close"; //close button content
   var search_header= "Search on forum"; //header title content

   $('body').not(':input[type=button], :input[type=text] :input[type=submit], :input[type=reset], textarea').keypress(function(content) {
      var focused = $(':focus');
      if (focused[0] || $('#search_hover_page_backdrop').length > 0) {
                     $('#search_hover_page_body input[type="text"]').focus();
      } else {
                     console.log(content);
                     console.log(this.value);
         $('body').prepend('<div id="search_hover_page_backdrop"></div><div id="search_hover_page_body"><span class="search_hover_close">'+search_close+'</span><h2>'+search_header+'</h2><div id="search-box"><form method="GET" action="/search" id="search"><p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value=""><input class="button2" type="submit" value="'+search_label+'"></p></form></div></div>');
                     $('#search_hover_page_body input[type="text"]').val('');
                     $('#search_hover_page_body input[type="text"]').focus();
      }
   });

   $('body').on('click', '#search_hover_page_backdrop, .search_hover_close', function() {
      $('#search_hover_page_backdrop').remove();
      $('#search_hover_page_body').remove();
   });

$(document).keyup(function(e) {
    if (e.key === "Escape") { // escape key maps to keycode `27`
        $('#search_hover_page_backdrop').remove();
      $('#search_hover_page_body').remove();
    }
});

});

Javascript Customization

You can customize the content of the variable

Code: var search_label = "Search"; //button content

for the text to show on the button

You can customize the content of the variable

Code: var search_header= "Search on forum"; //header title content

for the text to show the header of the popup

You can customize the content of the variable

Code: var search_close= "Close"; //button close content

for the text to show on the button to close the popup

---

Have fun!

[TonnyKamper]

Woohoo you're on a roll very nice again 

[YoshiGM]

Great code and tutorial!

Thank Niko

[Niko]

Thanks a lot guys

edit: I've edited the code to be able to close the popup also by pressing ESC on your keyobards