Search Input

<div class="container">
<pf-search-input id="search-input" placeholder="Search">
  <pf-option>What is Red Hat Enterprise Linux?</pf-option>
  <pf-option>How does Red Hat OpenShift work?</pf-option>
  <pf-option>Why use Red Hat Ansible for automation?</pf-option>
  <pf-option>Where can Red Hat OpenShift be deployed?</pf-option>
  <pf-option>When should you use Red Hat Enterprise Linux?</pf-option>
  <pf-option>What is Red Hat Satellite?</pf-option>
  <pf-option>How does Red Hat integrate with AWS and other clouds?</pf-option>
  <pf-option>Why choose Red Hat over other Linux vendors?</pf-option>
  <pf-option>Where can I learn Red Hat technologies?</pf-option>
  <pf-option>When does support end for RHEL versions?</pf-option>
  <pf-option>What are Red Hat certifications?</pf-option>
  <pf-option>How do you secure a RHEL server?</pf-option>
  <pf-option>Why use OpenShift instead of vanilla Kubernetes?</pf-option>
  <pf-option>Where is Red Hat headquartered?</pf-option>
  <pf-option>When should you use Red Hat CoreOS?</pf-option>
  <pf-option>What is Red Hat Insights?</pf-option>
  <pf-option>How do you manage Red Hat subscriptions?</pf-option>
  <pf-option>Why is RHEL considered enterprise-grade?</pf-option>
  <pf-option>Where can I download RHEL for testing?</pf-option>
  <pf-option>When was Red Hat founded?</pf-option>
</pf-search-input>
</div>
<script type="module">
import '@patternfly/elements/pf-search-input/pf-search-input.js';
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('change', (event) => {
/* eslint-disable no-console /
console.log('Selected:', event.target.value);
/ eslint-disable no-console */
});
</script>
<style>
.container {
padding: 40px;
}
</style>

<form class="container">
<div class="search-input-container">
  <pf-search-input id="search-input" name="search" placeholder="Search">
    <pf-option value="Alabama"> Alabama </pf-option>
    <pf-option value="New Jersey"> New Jersey </pf-option>
    <pf-option value="New York"> New York </pf-option>
    <pf-option value="New Mexico"> New Mexico </pf-option>
    <pf-option value="North Carolina"> North Carolina </pf-option>
    <pf-option value="Alabama1"> Alabama 1 </pf-option>
    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
    <pf-option value="New York1"> New York 1 </pf-option>
    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
    <pf-option value="Alabama2"> Alabama 2 </pf-option>
    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
    <pf-option value="New York2"> New York 2 </pf-option>
    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
    <pf-option value="Alabama3"> Alabama 3 </pf-option>
    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
    <pf-option value="New York3"> New York 3 </pf-option>
    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
  </pf-search-input>
  <pf-button> Search</pf-button>
</div>
</form>
<script type="module">
import '@patternfly/elements/pf-search-input/pf-search-input.js';
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('change', (event) => {
/* eslint-disable no-console /
console.log('Selected:', event.target.value);
/ eslint-disable no-console */
});
const form = document.querySelector('form.container');
form.addEventListener('submit', (event) =>{
event.preventDefault();
/* eslint-disable no-console /
console.log("Value:", form.elements.search?.value);
/ eslint-disable no-console */
})
</script>
<style>
.container {
padding: 40px;
.search-input-container {
display: flex;
align-items: center;
justify-content: flex-start;
#search-input {
margin-right: 1rem;
}
}
}
</style>

<form class="container">
<div class="search-input-container">
  <pf-search-input disabled id="search-input" name="search" placeholder="Search">
    <pf-option>Blue</pf-option>
    <pf-option>Green</pf-option>
    <pf-option>Magenta</pf-option>
    <pf-option>Orange</pf-option>
    <pf-option>Purple</pf-option>
    <pf-option>Periwinkle</pf-option>
    <pf-option>Pink</pf-option>
    <pf-option>Red</pf-option>
    <pf-option>Yellow</pf-option>
  </pf-search-input>
  <pf-button> Search</pf-button>
</div>
</form>
<script type="module">
import '@patternfly/elements/pf-search-input/pf-search-input.js';
</script>
<style>
.container {
padding: 40px;
.search-input-container {
display: flex;
align-items: center;
justify-content: flex-start;
#search-input {
margin-right: 1rem;
}
}
}
</style>