需要表格来填充搜索栏的搜索结果

Question

我有一个带有搜索栏和一堆下拉菜单的网页，但现在只有搜索栏很重要。无论如何，我有它的工作在哪里，当我点击go按钮后的搜索栏，它带来了一个表，但不会把搜索项目在表中，因为我认为它会。我使用SimpleHTTPServer通过Python

<form role="form" id="form">
        <fieldset>
            <div class="form-group">
            <div class="row">
            <label for="search"> </label>
            <div class="col-lg-7 col-lg-offset-2">
            <input type="text"
                class="form-control" name="search" id="search"
                placeholder="Search for..." />
            </div>
                <div class="col-lg-2">
                <br>
                <button type="button" class="btn btn-success" id="submit">       Go!
                </button> </div> </div> </div>
            </fieldset>
    </form> 

JS:$(" #提交").click(函数(e) {

e.preventDefault ();

         var search=$('#search').val();
         $.get('post2.html', function(returndata){
         $('#output').html(returndata);
         } );

    });
<table class="table">
    <thead>
        <tr>
        <th> Previous Searches: </th>
        </tr>
    </thead>
        <tr>
        <script>document.write(search)</script>
        </tr>
</table>

Answer 1

您的"搜索"超出了范围。它只存在于.click()的匿名函数中。您需要以某种方式将"search"传递到HTML中，但根据当前的设置，这实际上是不可能的。

我建议使用类似Handlebars的东西，它允许您使用变量占位符定义模板化的HTML，编译它们，然后插入变量值。例如，您可以在HTML中定义:

<script type="text/x-handlebars-template" id="table-data-template">
    <table class="table">
        <thead>
            <tr>
                <th> Previous Searches: </th>
            </tr>
        </thead>
        <tr>
            {{data}}
        </tr>
    </table>
</script>

在你的JS中，你可以这样做:

$('#submit').click(function(e){ 
    e.preventDefault();
    var renderData = Handlebars.compile($("#table-data-template").html());
    var search=$('#search').val();
    $('#output').html(renderData({data: search});
}

超级干净。但是你得花点时间读一下车把之类的东西。

如果你在你的应用中没有做很多基于模板的工作，因此Handlebars可能是多余的，你可以简单地在你的JS中定义HTML模板，像这样:

$('#submit').click(function(e){ 
    e.preventDefault();
var search=$('#search').val();
$('#output').html(
    "<table class='table'>
        <thead>
            <tr>
                <th> Previous Searches: </th>
            </tr>
        </thead>
        <tr>" + search +     
        "</tr>
    </table>");

字面上写出来的HTML字符串，将注入到您的输出和连接您的搜索结果在那里。不是很干净，但是如果你只做一次，就能完成任务。