googleみたいな検索サイト html

まずは

<form action="/search-result/">
 <input id="search-input" placeholder="1つキーワードを入力" type="text" name="search-key">
 <input id="search-buttom" class="fas" type="submit" value="" method="get">
</form>
<div class="contents">
 <h1>検索結果</h1>
 <ul id="ul">
 </ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
　//URLのパラメーターを取得
 let v = new URLSearchParams(window.location.search);
　//URLのパラメーターのうち検索されたキーワードを取得
 v = v.get('search-key');
　//検索したい全てのURLを配列に格納
 const urlLists = [
   "/data/xml/",
   "/site-speed/asynchronous/",
   "/site-speed/for_while/",
   "/site-speed/async-2/"];
 $.each(urlLists, function(i){
   $.ajax({
     url　: urlLists[i],
     dataType : 'html',
     success　: function(data){
　　　   //上記のURLからキーワードを探す
       if( $(data).find("#article").text().indexOf(v) !== -1){
　　　　　　//あれば、ページを表示する
         $('<li><a href="' + urlLists[i] + '">' +$(data).find("h1").text() + '</a></li>').appendTo('ul');
         }
       },
       error: function(data){
         console.log("error")
       }
     });
   });
</script>
let v = new URLSearchParams(window.location.search);
v = v.get('search-key');
const urlLists = [
 "/data/xml/",
 "/site-speed/asynchronous/",
 "/site-speed/for_while/",
 "/site-speed/async-2/"];
$.each(urlLists, function(i){
 $.ajax({
   url　: urlLists[i],
   dataType : 'html',
   success　: function(data){
       if( $(data).find("#article").text().indexOf(v) !== -1){
         $('<li><a href="' + urlLists[i] + '">' +$(data).find("h1").text() + '</a></li>').appendTo('ul');
       }
   },
   error: function(data){
       console.log("error")
   }
 });
});

です。まだ原型なのでこれから作りましょう。

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？