javascript - 使用javascript在文本框中显示数据

Question

我想在文本框中的数组中显示过滤后的数据...我已经在谷歌中搜索了好几天，以寻找与我的程序相同的想法，但我找不到任何帮助。

我认为问题是脚本没有按预期工作...我需要你们的帮助。

示例预期输出:

html:

<form name="form" method="get"> 
Search batchcode: <input type="text" id="query" name="search" /><br /> 
<table> 
<tr> 
<td> 
ID: <br /> 
<input id="id1" type="text" name="id1" /> <br /> 
<input id="id2" type="text" name="id2" /> <br /> 
</td> 
<td> 
Name: <br /> 
<input id="name1" type="text" name="name1" /> <br /> 
<input id="name2" type="text" name="name2" /> <br /> 
</td> 
<td> 
Score 1: <br /> 
<input id="optA1" type="text" name="optA1" /> <br /> 
<input id="optA2" type="text" name="optA2" /> <br /> 
</td> 
<td> 
Score 2: <br /> 
<input id="optB1" type="text" name="optB1" /> <br /> 
<input id="optB2" type="text" name="optB2" /> <br /> 
</td> 
<td> 
Other Qualification: <br /> 
<input id="other_qual1" type="text" name="other_qual1" /> <br /> 
<input id="other_qual2" type="text" name="other_qual2" /> <br /> 
</td> 
<td> 
Interview: <br /> 
<input id="interview1" type="text" name="interview1" /> <br /> 
<input id="interview2" type="text" name="interview2" /> <br /> 
</td> 
<td> 
Total: <br /> 
<input id="total1" type="text" name="total1" /> <br /> 
<input id="total2" type="text" name="total2" /> <br /> 
</td> 
</tr> 
</table> 
</form>

javascript代码:

<script type="text/javascript">
$(document).ready(function(){
    $('input[name^=search]').focusout(function(){
            $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:'JSON',
            success: function(result) {
                $('#id1').val(result.id).show();
                $('#id2').val(result.id).show();
                $('#name1').val(result.name).show();
                $('#name2').val(result.name).show();
                $('#optA1').val(result.score1).show();
                $('#optA2').val(result.score1).show();
                $('#optA1').val(result.score2).show();
                $('#optA2').val(result.score2).show();
                $('#other_qual1').val(result.other_qual).show();
                $('#other_qual2').val(result.other_qual).show();
                $('#interview1').val(result.interview).show();
                $('#interview2').val(result.interview).show();
                $('#total1').val(result.total).show();
                $('#total2').val(result.total).show();
            },
             error: function(jqXHR,textStatus,errorThrown ){
             console.log(JSON.stringify(jqXHR));
             console.log(textStatus);
             console.log(errorThrown);
        }

        });
    })
});      
</script>

search.php代码:

<?php
$q = $_GET['term'];
mysql_connect("localhost","root","");
mysql_select_db("test");
$query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");
$data = array();
while($row = mysql_fetch_array($query)){
$data[] = array('value'=>$row['batchcode'], 
'id' => $row['id'], 
'name' => $row['name'], 
'score1' => $row['score1'], 
'score2' => $row['score2'], 
'other_qual' => $row['other_qual'], 
'interview' => $row['interview'], 
'total' => $row['total']
    );
}
echo json_encode($data);
?>

当我转到 search.php 页面时，我每次都会得到这个输出:

Answer 1

测试这个:

PHP

<?php

if (isset($_GET['term'])) {

    $q = $_GET['term'];
    mysql_connect("localhost", "root", "");
    mysql_select_db("stackoverflow");
    $query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");

    $data = array();

    while ($row = mysql_fetch_array($query)) {
        $data[] = array(
            'value' => $row['batchcode'],
            'id' => $row['id'],
            'name' => $row['name'],
            'score1' => $row['score1'],
            'score2' => $row['score2'],
            'other_qual' => $row['other_qual'],
            'interview' => $row['interview'],
            'total' => $row['total']
        );
    }

    header('Content-type: application/json');
    echo json_encode($data);

}

?>

JS

<script>
$(document).ready(function(){
    $('#send_search_form').click(function(event){

            event.preventDefault();
            $(".search_form_input").val('');

         $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:"JSON",
            success: function(result) {

            var ii = 1;

            for (var i = 0; i < result.length; i++) { 

                        $('#id'+ii+'').val(result[i].id).show();
                        $('#name'+ii+'').val(result[i].name).show();
                        $('#optA'+ii+'').val(result[i].score1).show();
                        $('#optB'+ii+'').val(result[i].score1).show();
                        $('#other_qual'+ii+'').val(result[i].other_qual).show();
                        $('#interview'+ii+'').val(result[i].interview).show();
                        $('#total'+ii+'').val(result[i].total).show();
                ii++;
                }

            }

        });

    });
});      
</script>

HTML

<form>
    Search batchcode: <input id="query" name="search" type="text"><br>

    <table>
        <tr>
            <td>ID:<br>
            <input id="id1" class="search_form_input" name="id1" type="text"><br>
            <input id="id2" class="search_form_input" name="id2" type="text"><br></td>

            <td>Name:<br>
            <input id="name1" class="search_form_input" name="name1" type="text"><br>
            <input id="name2" class="search_form_input" name="name2" type="text"><br></td>

            <td>Score 1:<br>
            <input id="optA1" class="search_form_input" name="optA1" type="text"><br>
            <input id="optA2" class="search_form_input" name="optA2" type="text"><br></td>

            <td>Score 2:<br>
            <input id="optB1" class="search_form_input" name="optB1" type="text"><br>
            <input id="optB2" class="search_form_input" name="optB2" type="text"><br></td>

            <td>Other Qualification:<br>
            <input id="other_qual1" class="search_form_input" name="other_qual1" type="text"><br>
            <input id="other_qual2" class="search_form_input" name="other_qual2" type=
            "text"><br></td>

            <td>Interview:<br>
            <input id="interview1" class="search_form_input" name="interview1" type="text"><br>
            <input id="interview2" class="search_form_input" name="interview2" type="text"><br></td>

            <td>Total:<br>
            <input id="total1" class="search_form_input" name="total1" type="text"><br>
            <input id="total2" class="search_form_input" name="total2" type="text"><br></td>
        </tr>
    </table><input id="send_search_form" type="submit" value="send">
</form>