18486


失礼致します。

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

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

\---HTML---

[code]

    <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>
    
[/code]

\--javascript--

[code]

    $(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(['']);
                    }
              });
    
            }
        });
    });
    
[/code]

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

[code]

         //画面構築完了後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>
    
[/code]


CC BY-SA 3.0
2015-11-06T09:36:52.193
18471
2015-11-06T14:51:02.947
2015-11-06T10:09:11.033
5008
13072
question
javascript html ajax
2つあるHTML機能を一つにまとめたいです。


jQuery使用時に以下の書き方をすると、どれを使ってもDOM構築後のタイミングで実行したい処理を実行できます。

[code]

    $(document).ready(function(){
    /*実行したい処理*/
    });
    
    $().ready(function(){
    /*実行したい処理*/
    });
    
    $(function(){
    /*実行したい処理*/
    });
    
[/code]

よって、下記のように変更すれば、解決できると思います。

[code]

    $(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(['']);
                    }
              });
    
            }
        });
    
        $.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);
              }
        });
    });
    
[/code]


CC BY-SA 3.0
2015-11-06T14:51:02.947
18486
2015-11-06T14:51:02.947
13152
18471
answer