We Keep Coding

Item selected from dropdown-item not opening on first click?

There is a dropdown menu like this.
function changeRange(range) {
var options = {
data.......
};
var options1 = {
data.......
};
var options2 = {
data.......
};
if (range === 'last30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options
);
} else if (range === 'month') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options1
);
} else if (range === 'partner30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options2
);
} else if (range === 'partnermonth') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options3
);
}
chart.render();
}
<div class="widget widget-chart-one">
<div class="widget-heading">
<h5 class="">Total Coins</h5>
<div class="task-action">
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" id="pendingTask" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="pendingTask" style="will-change: transform;">
<button class="dropdown-item" onclick="changeRange('last30')" value="last30">Mobile 30 Day</button>
<button class="dropdown-item" onclick="changeRange('month')" value="month">Mobile Monthly</button>
<button class="dropdown-item" onclick="changeRange('partner30')" value="partner30">Partner 30 Day</button>
<button class="dropdown-item" onclick="changeRange('partnermonth')" value="partnermonth">Partner Monthly</button>
</div>
</div>
</div>
</div>
<div class="widget-content">
<div id="revenue"></div>
</div>
</div>
My question is: When I choose an option from the Dropdown menu, it does not load on the first click. For example, I have the "Mobile 30 days" graphic on my page, and I want to switch to the "Mobile Monthly" option. When I click on the "Mobile Monthly" option, the page refreshes, but the graphic does not change. When I click the same again, the graphic I want opens this time. I even explain the photo I put below. It tries and fails to open a chart below the previous chart on the first click, updates the chart on the second click. I think conditional statements cause the problem. What do you think?
At the first click, it tries to open the graphic I want here. Then, for 1 or 2 seconds, it comes and goes. On the second click, it now replaces the top graphic with what I want.
Also, I get the following error: Cannot read properties of undefined (reading 'filter')

You creatin new chart every time function executes, instead try updating it. You can do it without referencing the instance of the chart with exec. https://apexcharts.com/docs/methods/#exec
ApexCharts.exec('mychart', 'updateOptions', options);
But first you need to add id to your options
chart:{
id: 'mychart',
...
}

How to display hide/show menu (onblur / onfocus)

I would like to have a second menu (see picture) only when you press the user icon. I managed to put a display "Block" and "Display: None". However when I press on an item of this second menu, this menu disappears.
How to keep the focus of this menu?
Screenshot
<div class="header-user">
<button class="block-icone" aria-haspopup="true" onfocus="document.getElementById('myMenu').style.display = 'block';" onblur="document.getElementById('myMenu').style.display = 'none';">
<img src="https://staging.kanoon.legal/static/media/iconProfile.9defa0f4.svg" alt="icon-profile" data-testid="icon-profile" class="icone-image">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
</svg>
<div class="dropdown-menu" id="myMenu" role="menu" style="display: none">
<a class="dropdown-item" href="https://staging.kanoon.legal/settings"><img src="https://staging.kanoon.legal/static/media/iconSettings.0e56b25f.svg" tabindex="1" alt="icon-settings" data-testid="icon-settings" class="dropdown-icone">Paramètres</a>
<a class="dropdown-item" href="https://staging.kanoon.legal/logout"><img src="https://staging.kanoon.legal/static/media/iconLogout.63f6a18e.svg" tabindex="2" alt="icon-logout" data-testid="icon-logout" class="dropdown-icone">Se déconnecter</a>
</div>
</button>
</div>

You can add a 'click' event listener to the top level menu, that toggles a boolean value of true or false. If true, add a 'display: block' style to the sub menu, if false add a 'display: none' value to the submenu.
index.html
<div>
<button id='toggle-menu'>Menu</button>
<div id='sub-menu'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
</div>
</div>
app.js
const toggleMenu = document.getElementById('toggle-menu');
const subMenu = document.getElementById('sub-menu');
let showSubMenu = false;
toggleMenu.addEventListener('click', () => {
showSubMenu = !showSubMenu
if (showSubMenu === true) {
subMenu.style.display = 'none'
} else {
subMenu.style.display = 'block'
}
})
Codepen here: https://codepen.io/srosser2/pen/jOyEBWM?editors=1111

Why MDCSelect:change is not working with javascript for material design

Why MDCSelect:change is not working when i call it before appending all options
MDCSelect:change is working when i put it after appending list BUT UI does not look good.
Question: How to make MDCSelect:change to working without harming ui look.
It works perfectly when i shuffle the code of those 2 lines
$('#select_dropdown').html(usersStr);
initializeSelect();
With the above code select UI does not look good when you click outside anywhere or simply
for a better view, I have created codepen here: https://codepen.io/eabangalore/pen/poNmBpm?editors=1010
var selectBoxMap = {};
function initializeSelect(){
var mdcSelectList = document.querySelectorAll(' .mdc-select');
if(mdcSelectList){
[].forEach.call(mdcSelectList,function(el){
var select = new mdc.select.MDCSelect(el);
el.setAttribute('ripple-attached', true);
var dropDownId = $(el).find('ul.mdc-list').attr('id');
selectBoxMap[dropDownId] = select;
});
}
}
$(async function(){
var results = await $.get('https://jsonplaceholder.typicode.com/users');
var usersStr = '';
for(var i = 0; i < results.length; i++){
var item = results[i];
usersStr += `<li class="mdc-list-item" data-id="${item.id}" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text" data-id="${item.id}">
${item.name}
</span>
</li>`
}
initializeSelect();
$('#select_dropdown').html(usersStr);
for(var key in selectBoxMap){
if(selectBoxMap[key]){
selectBoxMap[key].listen('MDCSelect:change', (e) => {
alert('dropdown changed');
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<!-- select dropdown -->
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-expanded="false">
<span class="mdc-select__ripple"></span>
<span class="mdc-floating-label">Status</span>
<span class="mdc-select__selected-text-container">
<span id="" class="mdc-select__selected-text"></span>
</span>
<span class="mdc-select__dropdown-icon">
<span class="mdc-select__dropdown-icon-inactive material-icons">arrow_drop_down</span>
<span class="mdc-select__dropdown-icon-active material-icons">arrow_drop_up</span>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" id="select_dropdown" role="listbox" aria-label="listbox">
</ul>
</div>
</div>
Still i'm looking for solution, please help me thanks in advance!!

I've got the idea from this link
var selectBoxMap = {};
function initializeSelect(){
var mdcSelectList = document.querySelectorAll(' .mdc-select');
if(mdcSelectList){
[].forEach.call(mdcSelectList,function(el){
var select = new mdc.select.MDCSelect(el);
el.setAttribute('ripple-attached', true);
var dropDownId = $(el).find('ul.mdc-list').attr('id');
selectBoxMap[dropDownId] = select;
});
}
}
$(async function(){
var results = await $.get('https://jsonplaceholder.typicode.com/users');
var usersStr = '';
for(var i = 0; i < results.length; i++){
var item = results[i];
usersStr = `<li class="mdc-list-item" aria-selected="false" data-value=" ${item.name}" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
${item.name}
</span>
</li>`;
$('#select_dropdown').append(usersStr);
}
initializeSelect();
for(var key in selectBoxMap){
if(selectBoxMap[key]){
selectBoxMap[key].listen('MDCSelect:change', (e) => {
alert('dropdown changed');
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<!-- select dropdown -->
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-expanded="false">
<span class="mdc-select__ripple"></span>
<span class="mdc-floating-label">Status</span>
<span class="mdc-select__selected-text-container">
<span id="" class="mdc-select__selected-text"></span>
</span>
<span class="mdc-select__dropdown-icon">
<span class="mdc-select__dropdown-icon-inactive material-icons">arrow_drop_down</span>
<span class="mdc-select__dropdown-icon-active material-icons">arrow_drop_up</span>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" id="select_dropdown" role="listbox" aria-label="listbox">
</ul>
</div>
</div>

WordPress: Display a fallback thumbnail if post doesn't have a featured image

I'm working on local WordPress, theme: Twenty Twenty.
I'm trying to get it so that if the article does not have a feature image, then it uses one sourced elsewhere, but no matter what I try it doesn't work. It either displays no image at all, or this.
Obviously, I don't want the sourced image on the ones that do have a featured image uploaded.
Here is what I have so far:
<?php
/**
* Displays the featured image
*
* #package WordPress
* #subpackage Twenty_Twenty
* #since Twenty Twenty 1.0
*/
// if has feature image
if ( has_post_thumbnail() && ! post_password_required() ) {
$featured_media_inner_classes = '';
// Make the featured media thinner on archive pages.
if ( ! is_singular() ) {
$featured_media_inner_classes .= ' medium';
}
?>
<figure class="featured-media">
<div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<?php
the_post_thumbnail();
$caption = get_the_post_thumbnail_caption();
if ( $caption ) {
?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( $caption ); ?></figcaption>
<?php
}
?>
<!-- .featured-media -->
<?php
}
// no feature image
else {
echo '<img src="https://st4.depositphotos.com/17828278/24401/v/600/depositphotos_244011872-stock-illustration-image-vector-symbol-missing-available.jpg" alt=""/>';
}
edited WITH image
</header><!-- .archive-header -->
<div class="grid" id="container grid">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Such Is My Fortune</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
<img width="800" height="440" src="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-800x440.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" data-attachment-id="11" data-permalink="http://localhost:8888/wordpress/deaths-hourglass/" data-orig-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass.jpg" data-orig-size="944,1303" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"1"}" data-image-title="Death’s Hourglass" data-image-description="" data-medium-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-217x300.jpg" data-large-file="http://localhost:8888/wordpress/wp-content/uploads/2021/01/Deaths-Hourglass-742x1024.jpg" /></div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 19, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Such Is My Fortune</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Poetry </p></span>
<span class='genre'><p> </p></span>
</div>
without image
<div class ="box archive-container">
<div class="grid2">
<div class="entry-header-inner section-inner medium">
<div class="portfolio-header box-row">
<h1 class="entry-title heading-size-1">Vance</h2></div>
<div class="feature-img box-row">
<figure class="featured-media">
<div class="featured-media-inner section-inner medium">
</div><!-- .featured-media-inner -->
</figure>
</div>
<div class="post-meta box-row">
<div class="post-meta-wrapper post-meta-single post-meta-single-top">
<ul class="post-meta">
<li class="post-author meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post author</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20"><path fill="" d="M18,19 C18,19.5522847 17.5522847,20 17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,15.3431458 14.6568542,14 13,14 L5,14 C3.34314575,14 2,15.3431458 2,17 L2,19 C2,19.5522847 1.55228475,20 1,20 C0.44771525,20 0,19.5522847 0,19 L0,17 C0,14.2385763 2.23857625,12 5,12 L13,12 C15.7614237,12 18,14.2385763 18,17 L18,19 Z M9,10 C6.23857625,10 4,7.76142375 4,5 C4,2.23857625 6.23857625,0 9,0 C11.7614237,0 14,2.23857625 14,5 C14,7.76142375 11.7614237,10 9,10 Z M9,8 C10.6568542,8 12,6.65685425 12,5 C12,3.34314575 10.6568542,2 9,2 C7.34314575,2 6,3.34314575 6,5 C6,6.65685425 7.34314575,8 9,8 Z" /></svg> </span>
<span class="meta-text">
By seabear211 </span>
</li>
<li class="post-date meta-wrapper">
<span class="meta-icon">
<span class="screen-reader-text">Post date</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19"><path fill="" d="M4.60069444,4.09375 L3.25,4.09375 C2.47334957,4.09375 1.84375,4.72334957 1.84375,5.5 L1.84375,7.26736111 L16.15625,7.26736111 L16.15625,5.5 C16.15625,4.72334957 15.5266504,4.09375 14.75,4.09375 L13.3993056,4.09375 L13.3993056,4.55555556 C13.3993056,5.02154581 13.0215458,5.39930556 12.5555556,5.39930556 C12.0895653,5.39930556 11.7118056,5.02154581 11.7118056,4.55555556 L11.7118056,4.09375 L6.28819444,4.09375 L6.28819444,4.55555556 C6.28819444,5.02154581 5.9104347,5.39930556 5.44444444,5.39930556 C4.97845419,5.39930556 4.60069444,5.02154581 4.60069444,4.55555556 L4.60069444,4.09375 Z M6.28819444,2.40625 L11.7118056,2.40625 L11.7118056,1 C11.7118056,0.534009742 12.0895653,0.15625 12.5555556,0.15625 C13.0215458,0.15625 13.3993056,0.534009742 13.3993056,1 L13.3993056,2.40625 L14.75,2.40625 C16.4586309,2.40625 17.84375,3.79136906 17.84375,5.5 L17.84375,15.875 C17.84375,17.5836309 16.4586309,18.96875 14.75,18.96875 L3.25,18.96875 C1.54136906,18.96875 0.15625,17.5836309 0.15625,15.875 L0.15625,5.5 C0.15625,3.79136906 1.54136906,2.40625 3.25,2.40625 L4.60069444,2.40625 L4.60069444,1 C4.60069444,0.534009742 4.97845419,0.15625 5.44444444,0.15625 C5.9104347,0.15625 6.28819444,0.534009742 6.28819444,1 L6.28819444,2.40625 Z M1.84375,8.95486111 L1.84375,15.875 C1.84375,16.6516504 2.47334957,17.28125 3.25,17.28125 L14.75,17.28125 C15.5266504,17.28125 16.15625,16.6516504 16.15625,15.875 L16.15625,8.95486111 L1.84375,8.95486111 Z" /></svg> </span>
<span class="meta-text">
October 14, 2020
</span>
</li>
<li class="post-comment-link meta-wrapper">
<span class="meta-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><path d="M9.43016863,13.2235931 C9.58624731,13.094699 9.7823475,13.0241935 9.98476849,13.0241935 L15.0564516,13.0241935 C15.8581553,13.0241935 16.5080645,12.3742843 16.5080645,11.5725806 L16.5080645,3.44354839 C16.5080645,2.64184472 15.8581553,1.99193548 15.0564516,1.99193548 L3.44354839,1.99193548 C2.64184472,1.99193548 1.99193548,2.64184472 1.99193548,3.44354839 L1.99193548,11.5725806 C1.99193548,12.3742843 2.64184472,13.0241935 3.44354839,13.0241935 L5.76612903,13.0241935 C6.24715123,13.0241935 6.63709677,13.4141391 6.63709677,13.8951613 L6.63709677,15.5301903 L9.43016863,13.2235931 Z M3.44354839,14.766129 C1.67980032,14.766129 0.25,13.3363287 0.25,11.5725806 L0.25,3.44354839 C0.25,1.67980032 1.67980032,0.25 3.44354839,0.25 L15.0564516,0.25 C16.8201997,0.25 18.25,1.67980032 18.25,3.44354839 L18.25,11.5725806 C18.25,13.3363287 16.8201997,14.766129 15.0564516,14.766129 L10.2979143,14.766129 L6.32072889,18.0506004 C5.75274472,18.5196577 4.89516129,18.1156602 4.89516129,17.3790323 L4.89516129,14.766129 L3.44354839,14.766129 Z" /></svg> </span>
<span class="meta-text">
No Comments<span class="screen-reader-text"> on Vance</span> </span>
</li>
</ul><!-- .post-meta -->
</div><!-- .post-meta-wrapper -->
<div class="post-inner thin ">
<div class="entry-content">
<div class="portfolio-filter box-row">
<span class='type'><p> Type: Novel </p></span>
<span class='genre'><p>Genres: Adult Themes ❦ Dark Fantasy </p></span>
</div>

How can I search by specific category selected by the user

I am trying to let the user select a category (3 in total) and then search for items in that category only.
Image for reference: https://ibb.co/zRspdFs
So, when a user clicks on, for example category 1, and then clicks on the form input, the search should show items from the selected category.
For now I have some dummy data as value for the input field. and I can retrieve values from the dropdown selection. But I don't know how to filter the search.
var availableTags = [
"mama",
"tata",
"PAPI"
];
$('#menu li').click(function(ev) {
ev.preventDefault();
var value = $(this).val();
$("#custId").val(value);
});
$("#searcher").autocomplete({
source: availableTags,
minLength: 0
}).click(function() {
$(this).autocomplete("search", $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form class="form-inline col-lg-4 col-md-4 col-xs-12">
<svg class="svg-custom" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
<input class="input-custom srch form-control mr-sm-2" type="search" placeholder="Search by Keywords" id="searcher" aria-label="Search">
<div class="search-dropper">
<span class="icon-down-open-mini arrow-search"></span>
<ul id="menu" class="search-dropdown">
<a class="" href="#">
<li value="1">1</li>
</a>
<a href="#">
<li value="2">2</li>
</a>
<a href="#">
<li value="3">3</li>
</a>
<li>
<input type="hidden" id="custId" name="custId" value="3487">
</li>
</ul>
</div>
</form>

Can you make array that contains list of items that you can pass to autocomplete after category is selected?
eg:
var availableTags = [
"mama",
"tata",
"PAPI"
];
var categories = [
[searchItem1, searchitem2...],
[searchItem1, searchitem2...],
[searchItem1, searchitem2...]
]
On category select you take index, and you pull searchable items by index, and then pass that to autocomplete:
$( "#searcher" ).autocomplete({
source: categories[indexOfCategory]
});
Im sure there is a bit cleaner solution, jquery is not my specialty, but you can do something like this