RamRaider

searchcountry.html

Sep 23rd, 2021
948
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>Search</title>
  4.         <style>
  5.             /*
  6.                 Allow CSS to perform the necessary style
  7.                 changes to elected DOM elements rather
  8.                 than use JS to do trivial tasks.
  9.             */
  10.             body *{font-family:monospace}
  11.             .bordered{border:1px solid #A5ACB2;}
  12.             td,th{border:1px solid rgba(0,0,0,0.25);padding:0.1rem;}
  13.             tr{background:rgb(230, 240, 255)}
  14.             tr:hover{background:rgb(0, 90, 20);cursor:pointer;color:white}
  15.             td:hover{background:yellowgreen}
  16.             th{background:darkgray;color:white}
  17.         </style>
  18.     </head>
  19.     <body>
  20.    
  21.         <form name='search'>
  22.             <label>Country: <input type='text' name='query' size='30' /></label>
  23.             <div id='livesearch'></div>
  24.         </form>
  25.        
  26.         <script>
  27.        
  28.             const div=document.getElementById('livesearch');
  29.             const cn='bordered';
  30.            
  31.             document.forms.search.query.addEventListener('keyup',function(e){
  32.                 if( this.value=='' ){
  33.                     div.innerHTML='';
  34.                     div.classList.remove(cn)
  35.                 }else{
  36.                    
  37.                     // clear the display before adding NEW content.
  38.                     div.innerHTML='';
  39.                    
  40.                     fetch( 'searchCountry.php?q='+this.value )
  41.                         .then( r=>r.text() )
  42.                         .then( text=>{ 
  43.                             // this is the ajax callback. Add the generated content to specified parent
  44.                             // and allow event delegation to process any events registered.
  45.                             // use this to process the response however you see fit!
  46.                             div.insertAdjacentHTML('afterbegin',text);
  47.                             div.classList.add(cn)
  48.                         })
  49.                 }
  50.             });
  51.            
  52.            
  53.             /*******************************
  54.                 Delegated Event listener
  55.                 ------------------------
  56.                 Note that this is "bound" to the DIV that will accept the
  57.                 new HTML content in the ajax callback
  58.             */
  59.            
  60.             div.addEventListener('click',function(e){
  61.                 if( e.target!=e.currentTarget && e.target.tagName=='TD' ){
  62.                     console.log( 'Do something with: %s?', e.target.textContent )
  63.                 }
  64.             });
  65.         </script>
  66.     </body>
  67. </html>
RAW Paste Data