mirror of
https://github.com/10h30/full-screen-morphing-search.git
synced 2026-07-11 10:36:02 +09:00
Add autoComplete.js to plugin.
This commit is contained in:
LebCit
@@ -389,21 +389,159 @@ input[type="search"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Autocomplete dropdown box styles */
|
||||
/* autoComplete styles */
|
||||
|
||||
.ui-autocomplete {
|
||||
width: 80% !important;
|
||||
overflow-wrap: break-word;
|
||||
box-shadow: 2px 2px 3px #888888;
|
||||
background: #fff;
|
||||
z-index: 99998;
|
||||
.autoComplete_wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.ui-menu-item {
|
||||
list-style-type: none;
|
||||
padding: 10px;
|
||||
#autoComplete {
|
||||
height: 3rem;
|
||||
width: 370px;
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 3.2rem;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
color: rgba(255, 122, 122, 0.3);
|
||||
outline: none;
|
||||
border-radius: 10rem;
|
||||
border: 0;
|
||||
border: 0.05rem solid rgba(255, 122, 122, 0.5);
|
||||
background-image: url(./images/search.svg);
|
||||
background-size: 1.4rem;
|
||||
background-position: left 1.05rem top 0.8rem;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: border-box;
|
||||
background-color: #fff;
|
||||
transition: all 0.4s ease;
|
||||
-webkit-transition: all -webkit-transform 0.4s ease;
|
||||
}
|
||||
|
||||
.ui-menu-item:hover {
|
||||
background: #f1f1f1;
|
||||
#autoComplete::placeholder {
|
||||
color: rgba(255, 122, 122, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:hover::placeholder {
|
||||
color: rgba(255, 122, 122, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:focus::placeholder {
|
||||
padding: 0.1rem 0.6rem;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 122, 122, 0.4);
|
||||
}
|
||||
|
||||
#autoComplete:focus::selection {
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
#autoComplete::selection {
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
#autoComplete:hover {
|
||||
color: rgba(255, 122, 122, 0.8);
|
||||
transition: all 0.3s ease;
|
||||
-webkit-transition: all -webkit-transform 0.3s ease;
|
||||
}
|
||||
|
||||
#autoComplete:focus {
|
||||
color: rgba(255, 122, 122, 1);
|
||||
border: 0.06rem solid rgba(255, 122, 122, 0.8);
|
||||
}
|
||||
|
||||
#autoComplete_list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.6rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
|
||||
border: 1px solid rgba(33, 33, 33, 0.07);
|
||||
z-index: 1000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.autoComplete_result {
|
||||
margin: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
font-size: 1.5em;
|
||||
color: #212121;
|
||||
transition: all 0.1s ease-in-out;
|
||||
border-radius: 0.35rem;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.autoComplete_result::selection {
|
||||
color: rgba(#ffffff, 0);
|
||||
background-color: rgba(#ffffff, 0);
|
||||
}
|
||||
|
||||
.autoComplete_result:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
.autoComplete_highlighted {
|
||||
color: rgba(255, 122, 122, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.autoComplete_highlighted::selection {
|
||||
color: rgba(#ffffff, 0);
|
||||
background-color: rgba(#ffffff, 0);
|
||||
}
|
||||
|
||||
.autoComplete_selected {
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 122, 122, 0.15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.autoComplete_wrapper {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#autoComplete {
|
||||
width: 18rem;
|
||||
background-size: 1.6rem;
|
||||
background-position: left 1.1rem top 0.75rem;
|
||||
}
|
||||
|
||||
#autoComplete_list {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
#autoComplete {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
#autoComplete {
|
||||
background-size: 1.2rem;
|
||||
background-origin: border-box;
|
||||
border-width: 1px;
|
||||
background-position: left 1.1rem top 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -259,16 +259,18 @@ class Full_Screen_Morphing_Search {
|
||||
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($){
|
||||
var posts = <?php echo wp_json_encode( array_values( $source ) ); ?>;
|
||||
jQuery( 'input[name="s"]' ).autocomplete({
|
||||
source: posts,
|
||||
minLength: 2,
|
||||
select: function(event, ui) {
|
||||
var permalink = ui.item.permalink; // Get permalink from the datasource.
|
||||
window.location.replace(permalink);
|
||||
}
|
||||
});
|
||||
let posts = <?php echo wp_json_encode( array_values( $source ) ); ?>;
|
||||
new autoComplete({
|
||||
data: {
|
||||
src: posts,
|
||||
key: ["label"],
|
||||
cache: false
|
||||
},
|
||||
selector: "#morphsearch-input",
|
||||
onSelection: feedback => {
|
||||
let permalink = feedback.selection.value.permalink; // Get permalink from the datasource.
|
||||
window.location.replace(permalink);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
|
||||
@@ -13,6 +13,16 @@ function full_screen_morphing_search_thumb() {
|
||||
}
|
||||
add_action( 'init', 'full_screen_morphing_search_thumb' );
|
||||
|
||||
/**
|
||||
* Load autoComplete scripts in header.
|
||||
*
|
||||
* @since 3.3
|
||||
*/
|
||||
function fsmsp_load_autocomplete() {
|
||||
wp_enqueue_script( 'autocomplete', plugins_url( 'assets/js/autoComplete.min.js', __FILE__ ), array(), '8.2.1', false );
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'fsmsp_load_autocomplete' );
|
||||
|
||||
/**
|
||||
* This outputs the javascript needed to automate the live settings preview.
|
||||
* Also keep in mind that this function isn't necessary unless your settings
|
||||
|
||||
Reference in New Issue
Block a user