-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
12 changed files
with
279 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| .search-form, form[role="search"] { | ||
| position: relative; | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results { | ||
| display: none; | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results { | ||
| position: absolute; | ||
| z-index: 1000; | ||
| background: #fefefe; | ||
| border: 1px solid #ccc; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| max-height: 200px; | ||
| overflow-y: auto; | ||
| width: 100%; | ||
| top: 100%; | ||
| left: 0; | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results ul { | ||
| list-style-type: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| /* Align items vertically */ | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results li { | ||
| display: flex; | ||
| margin: 0 0 0 0 !important; | ||
| align-items: center; | ||
| padding: 5px; | ||
| border-bottom: 1px solid #eee; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results li:hover { | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .bsearch-autocomplete-results a { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| text-align: left; | ||
| } | ||
|
|
||
| /* Ensuring ul does not affect the input field */ | ||
| .search-form, form[role="search"] { | ||
| position: relative; | ||
| width: 100%; | ||
| /* Ensure it's responsive */ | ||
| } | ||
|
|
||
| @media (max-width: 600px) { | ||
| .bsearch-autocomplete-results { | ||
| width: 100%; | ||
| /* Ensure results take full width */ | ||
| max-height: 150px; | ||
| /* Adjust height for smaller screens */ | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <?php | ||
| /** | ||
| * Functions dealing with live search. | ||
| * | ||
| * @package Better_Search | ||
| */ | ||
|
|
||
| namespace WebberZone\Better_Search\Frontend; | ||
|
|
||
| if ( ! defined( 'WPINC' ) ) { | ||
| die; | ||
| } | ||
|
|
||
| /** | ||
| * Class Live_Search | ||
| * | ||
| * @since 4.0.0 | ||
| */ | ||
| class Live_Search { | ||
|
|
||
| /** | ||
| * Constructor to initialize the class. | ||
| */ | ||
| public function __construct() { | ||
| add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); | ||
| add_action( 'wp_ajax_bsearch_live_search', array( $this, 'live_search' ) ); | ||
| add_action( 'wp_ajax_nopriv_bsearch_live_search', array( $this, 'live_search' ) ); | ||
| } | ||
|
|
||
| /** | ||
| * Enqueue the live search script. | ||
| */ | ||
| public function enqueue_scripts() { | ||
| if ( ! \bsearch_get_option( 'enable_live_search' ) ) { | ||
| return; | ||
| } | ||
|
|
||
| $minimize = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; | ||
|
|
||
| wp_enqueue_script( | ||
| 'bsearch-live-search', | ||
| plugins_url( 'includes/js/better-search-live-search' . $minimize . '.js', BETTER_SEARCH_PLUGIN_FILE ), | ||
| array(), | ||
| BETTER_SEARCH_VERSION, | ||
| true | ||
| ); | ||
| wp_localize_script( | ||
| 'bsearch-live-search', | ||
| 'bsearch_live_search', | ||
| array( | ||
| 'ajax_url' => admin_url( 'admin-ajax.php' ), | ||
| ) | ||
| ); | ||
|
|
||
| wp_enqueue_style( | ||
| 'bsearch-live-search-style', | ||
| plugins_url( 'includes/css/bsearch-live-search' . $minimize . '.css', BETTER_SEARCH_PLUGIN_FILE ), | ||
| array(), | ||
| BETTER_SEARCH_VERSION | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Live search function. | ||
| */ | ||
| public function live_search() { | ||
| $search_query = isset( $_POST['s'] ) ? sanitize_text_field( wp_unslash( $_POST['s'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Missing | ||
|
|
||
| $query = new \Better_Search_Query( | ||
| array( | ||
| 'better_search_query' => true, | ||
| 's' => $search_query, | ||
| 'posts_per_page' => 5, | ||
| 'post_type' => wp_parse_list( \bsearch_get_option( 'post_types' ) ), | ||
| 'post_status' => 'publish', | ||
| ) | ||
| ); | ||
|
|
||
| $results = array(); | ||
| if ( $query->have_posts() ) { | ||
| while ( $query->have_posts() ) { | ||
| $query->the_post(); | ||
| $results[] = array( | ||
| 'title' => get_the_title(), | ||
| 'link' => get_permalink(), | ||
| ); | ||
| } | ||
| } | ||
| wp_reset_postdata(); | ||
|
|
||
| wp_send_json( $results ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| // Save this as js/better-search-live-search.js in your plugin directory | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| const searchForms = document.querySelectorAll('.search-form, form[role="search"]'); | ||
|
|
||
| searchForms.forEach(form => { | ||
| const searchInput = form.querySelector('input[name="s"]'); | ||
| if (!searchInput) return; | ||
|
|
||
| const resultsContainer = document.createElement('div'); | ||
| resultsContainer.className = 'bsearch-autocomplete-results'; | ||
| searchInput.parentNode.insertBefore(resultsContainer, searchInput.nextSibling); | ||
|
|
||
| let debounceTimer; | ||
|
|
||
| searchInput.addEventListener('input', function () { | ||
| clearTimeout(debounceTimer); | ||
| debounceTimer = setTimeout(() => { | ||
| const searchTerm = this.value; | ||
| if (searchTerm.length > 2) { | ||
| fetchResults(searchTerm, resultsContainer); | ||
| } else { | ||
| resultsContainer.innerHTML = ''; | ||
| resultsContainer.style.display = 'none'; // Hide the container when input is less than 3 characters | ||
| } | ||
| }, 300); | ||
| }); | ||
|
|
||
| // Hide autocomplete results when clicking outside the input field or results container | ||
| document.addEventListener('click', function (event) { | ||
| if (!form.contains(event.target) && !resultsContainer.contains(event.target)) { | ||
| resultsContainer.style.display = 'none'; // Hide the results container | ||
| } | ||
| }); | ||
|
|
||
| // Keep the container open if clicking inside it or on the input | ||
| searchInput.addEventListener('focus', function () { | ||
| if (resultsContainer.innerHTML.trim() !== '') { | ||
| resultsContainer.style.display = 'block'; | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| function fetchResults(searchTerm, resultsContainer) { | ||
| fetch(bsearch_live_search.ajax_url, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/x-www-form-urlencoded', | ||
| 'Cache-Control': 'no-cache' | ||
| }, | ||
| body: new URLSearchParams({ | ||
| action: 'bsearch_live_search', | ||
| s: searchTerm | ||
| }).toString() | ||
| }) | ||
| .then(function (response) { | ||
| return response.json(); | ||
| }) | ||
| .then(function (results) { | ||
| displayResults(results, resultsContainer); | ||
| }) | ||
| .catch(function (error) { | ||
| console.error('Error:', error); | ||
| }); | ||
| } | ||
|
|
||
| function displayResults(results, resultsContainer) { | ||
| resultsContainer.innerHTML = ''; // Clear previous results | ||
| if (results.length > 0) { | ||
| resultsContainer.style.display = 'block'; // Show the container if results exist | ||
| const ul = document.createElement('ul'); | ||
| results.forEach(result => { | ||
| const li = document.createElement('li'); | ||
| const a = document.createElement('a'); | ||
| a.href = result.link; | ||
| a.textContent = result.title; | ||
| li.appendChild(a); | ||
| ul.appendChild(li); | ||
| }); | ||
| resultsContainer.appendChild(ul); | ||
| } else { | ||
| resultsContainer.style.display = 'none'; // Hide the container if no results | ||
| } | ||
| } | ||
| }); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters