失礼致します。

今それぞれ違う機能をもったHTMLファイル（JS機能含む）があります。
一つはサジェスト機能し検索することができます。2つ目はURL先で表示されているデータをテーブルに変換して表示する機能です。この二つを組み合わせていただけないでしょうか？
前者は検索してページを表示してもJSON形式のため見づらい
後者はテーブルに変換して見やすいがURL先をあらかじめ指定するため応用が利かない。
最終的に検索してテーブル表示させたいです。
画面遷移してもしなくても大丈夫です。

難しい部類に入るかと思いますがJavaScriptに詳しいかた何卒宜しく御願い致します。
初心者のため質問内容で分からない点があるかと思います。修正しますので遠慮なくおっしゃて下さい。

---HTML---

<body>
<form method="get"action="http://localhost:8180/api/stock/search?q=" Accept-charset="UTF-8">
<input type="text"  id="ac2"  name="car_name" >
<input type="submit" value="検索"></form>

</body>

--javascript--

$(document).ready( function() {
    $("#ac2").autocomplete({
        source: function(req, resp){
            $.ajax({
                url: "http://127.0.0.1:8180/api/stockcars/keyword",
                type: "GET",
                cache: false,
                dataType: "json",
                data: {
                    car_name : req.term
                },
                success: function(o){
                    resp(o);
                },
                error: function(xhr, ts, err){
                    resp(['']);
                }
          });

        }
    });
});

---JSON形式のデータをテーブルにするHTMLファイル---

     //画面構築完了後URL先を指定したらそのJSON形式のテーブルを表示する。
    $(function() {
        $("").ready(function(){
          $.ajax({
              type: 'GET',
              url: 'http://localhost:8180/api/stockcars/search?q=',
              dataType: 'json',
              jsonCallback: 'data',
              success: function(json){
                var rows = "";

                     $.each(json, function(i, item){


                        $.each(item,function(key,value){
                        rows += "<tr>";
                        rows += "<td>";
                        rows += key;
                        rows += "</td>";
                        rows += "<td>";
                        rows += value;
                        rows += "</td>";
                        });

                    });
                    //テーブルに作成したhtmlを追加する
                    $("#tbl").append(rows);
              }
            });
        });
    });

    </script>
</head>
<body>
    <table id="tbl" border="1">
        <tbody>
            <tr>
                <th>項目</th><th>名前</th>
            </tr>
        </tbody>
    </table>