chore: search change event updated

Author: ArathyKumar

elements/pf-search-input/demo/pf-search-input-autocomplete.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>Search with autocomplete</h1>
-  <pf-search-input placeholder="Search">
+  <pf-search-input id="search-input" 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>
@@ -26,6 +26,15 @@ <h1>Search with autocomplete</h1>
 
 <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
 </script>
 
 <style>

elements/pf-search-input/pf-search-input.ts

@@ -20,7 +20,7 @@ import styles from './pf-search-input.css';
 import { PfOption } from '../pf-select/pf-option.js';
 import { bound } from '@patternfly/pfe-core/decorators.js';
 
-export class PfSelectChangeEvent extends Event {
+export class PfSearchChangeEvent extends Event {
   constructor() {
     super('change', { bubbles: true });
   }
@@ -246,7 +246,7 @@ export class PfSearchInput extends LitElement {
   @observes('value')
   private valueChanged() {
     this.#internals.setFormValue(this.value ?? '');
-    this.dispatchEvent(new PfSelectChangeEvent());
+    this.dispatchEvent(new PfSearchChangeEvent());
   }