使用实时搜索在表中创建多个行

时间:2013-02-19 08:34:55

标签: php jquery json

我想进行实时检查,并在表格中为每个结果创建一行。我所做的是当用户在文本字段中填写结果时,我使用jquery进行检查。

文本字段如下所示:

<input name="teamNaam" type="text" class="personeelField" id="teamNaam" onkeyup="return check_teamnaam();"/>

jquery是这样的:

<script language="javascript">
    $(document).ready(function () {
        $('#Loading').hide();
    });

    function wait(msecs) {
        var start = new Date().getTime();
        var cur = start
        while (cur - start < msecs) {
            cur = new Date().getTime();
        }
    }

    function check_teamnaam() {

        var teamNaam = $("#teamNaam").val();
        if (teamNaam.length > 2) {
            $('#Loading').show();
            $.post("checkVriendenTeam.php", {
                teamNaam: $('#teamNaam').val(),
            }, function (response) {
                //$('#Info').fadeOut();
                // $('#Loading').hide();
                var reactie = response;
                var obj = jQuery.parseJSON(reactie);
                console.log(obj.Coureur);

                if (reactie == "Bezet") {
                    //fffkdf
                } else {



                    $('#Info tr').has('td').remove();
                    $('#Info tr:last').after('<tr class="tabeltitel" height="30"><td width="5%">#</td><td width="29%" class="tabeltitel">' + response.Teamnaam + '</td><td width="23%" class="tabeltitel">' + response.Manager + '</td><td width="24%" class="tabeltitel">Vrienden worden</td></tr>');
                }

            });
            return false;
        }
    }
</script>

检查'checkVriendenTeam.php'并返回结果。结果如下:

[{"Teamnaam":"test"},{"Teamnaam":"test2"},{"Teamnaam":"test3"}]

我使用php代码生成此结果:

if($_REQUEST)
{
    $teamNaam   = $_REQUEST['teamNaam'];
    $query = "select * from spelers where Teamnaam  LIKE '".strtolower($teamNaam)."%'";
    $results = mysql_query( $query) or die('ok');

    if(mysql_num_rows(@$results) > 0) // not available
    {   $response = array();
        while($inhoud = mysql_fetch_array($results)) {

        $response[]['Teamnaam'] = $inhoud['Teamnaam'];

        }
        $jsonData = json_encode($response); 
        echo $jsonData;
    }
    else
    {
        echo 'no result';
    }   
}

但它只会创建一行而没有任何数据(未定义)。那么我需要做什么来获得3行?

2 个答案:

答案 0 :(得分:1)

考虑到你有正确的反应,要获得三行......你必须使用jquery.each循环

试试这个

    ....
    else{
       $('#Info tr').has('td').remove();
       $.each(obj ,function(i,v){  <------ here
         $('#Info tr:last').after('<tr class="tabeltitel" height="30"><td width="5%">#</td><td width="29%" class="tabeltitel">' + v.Teamnaam + '</td><td width="23%" class="tabeltitel">' + v.Manager + '</td><td width="24%" class="tabeltitel">Vrienden worden</td></tr>');
       });
     }

注意:不确定为什么你在那里使用v.Manager,因为你的obejct中没有经理...要么你必须通过你的PHP代码发送它,要么删除它。 ..

答案 1 :(得分:0)

此行不正确:

$('#Info tr:last').after('<tr class="tabeltitel" height="30"><td width="5%">#</td><td width="29%" class="tabeltitel">' + response.Teamnaam + '</td><td width="23%" class="tabeltitel">' + response.Manager + '</td><td width="24%" class="tabeltitel">Vrienden worden</td></tr>');

要获取团队名称,请使用:

obj[0].Teamnaam
obj[1].Teamnaam
// and so on....

这是因为,您正在分离JSON并将其设置为“obj”。所以obj包含PHP脚本给出的对象数组。