Question

我有一个mysql表，其中一个列中的团队名称（club_name）和另一个列中的id（club_id）。每个团队都有一个以各自ID为.png。

命名的徽标

然后我有一个文本输入，用户可以在其中写下团队的名称。有一个jQuery函数，根据用户输入的内容显示数据库中可能找到的团队名称，以便它可以自动完成。一旦用户选择其中一个选项，焦点就会移出文本输入。此时，我希望图像更改为与团队对应的徽标。当文本输入为空或名称与数据库中的任何团队不匹配时，图像应为0.png

我怎样才能做到这一点？到目前为止我的代码如下：

编辑：

我现在有三个问题：

建议将俱乐部ID存储在json对象中的方法是唯一的返回表格的第一行。

方法如下（尽管它只返回它确实有效的表格的一行，图像会变为合适的一个 - 我通过用俱乐部名称替换“这个俱乐部”进行了一些测试）：

<script>
var clublist = [ 
<?php
$search_clubs = " SELECT club_id, club_name FROM clubs ORDER BY club_id DESC";
$result_clubs = mysql_query($search_clubs);
echo json_encode(mysql_fetch_assoc($result_clubs)); //only returns one row
?>
];
</script>

使用另一种方法我能够拥有json对象中的所有行，但是当我通过替换＆＃39; thisclub＆＃39;来运行相同的测试时，这个行不起作用。以一个俱乐部的名义）：

<script>
var clublist = [ 
<?php
$clubid = array(); $clubname = array();
 $search_clubs = mysql_query(" SELECT club_id, club_name FROM clubs ");
while($row = mysql_fetch_array($search_clubs)) {
$clubid[] = $row["club_id"]; // or smth like $row["video_title"] for title
$clubname[] = $row["club_name"];
}
$res = array($clubid, $clubname);
echo json_encode($res);
?>
];
</script>

第二个问题是我不知道该替换什么＆＃39;这个俱乐部＆＃39;用。换句话说，如何获取函数返回的值。
我现在正在使用两个变量 - 一个用于存储俱乐部的名称，用于原始功能，另一个用于俱乐部名称和各自的id，用于使图像更改的功能。这是因为我不知道在原始函数中要做出哪些更改，以便它在新var中搜索名称（包含club_id）

完整的代码如下。

<img id="team-logo" src="logos/0.png"/>

<input type="text" class="club-name" name="home" autocomplete="off"/>

<script>
var clubs = [ 
    <?php
    $search_clubs = " SELECT club_name FROM clubs ";
    $result_clubs = mysql_query($search_clubs);
    while($clubs = mysql_fetch_array($result_clubs)) {
        $club_name = $clubs['club_name'];
        echo '"'.$club_name.'",';
    }
    ?>
];

var clublist = [ 
<?php
$search_clubs = " SELECT club_id, club_name FROM clubs ORDER BY club_id DESC";
$result_clubs = mysql_query($search_clubs);
echo json_encode(mysql_fetch_assoc($result_clubs)); //only returns one row
?>
];

$(".club-name").autocomplete({
    source: clubs,
    autoFocus: true,
    minLength: 2,
    delay: 0,
    close: function(event, ui){
        if (!event.keyCode || event.keyCode === 13){
            $(this).parents('form').find('.club-name').filter(function (){
                return $(this).val() === '';
            }).first().focus();
            //
        }

        clubid = "";
        $.each(clublist, function (i, elem) {
            if (elem.club_name === thisclub) {
                clubid = elem.club_id;
                $("#team-logo").attr("src", clubid+".png");
            }
        });
        if(clubid == "") {
            // show default image
            $("#team-logo").attr("src", "0.png");
        }
        //$("#team-logo").attr("src", clubs+".png");
    }
});
</script>

Answer 1

我会从原来的SELECT中获取club_id。

然后在焦点上你可以做一些事情：

$("#team-logo").attr("src", club_id+".png");

然后将图像src设置为新图像。

编辑：

为了扩展一点，使用json_encode（）将sql查询的结果存储在json对象中将允许你使用类似的东西：

<script>
    var clublist = [ 
    <?php
    $search_clubs = " SELECT club_id, club_name FROM clubs ";
    $result_clubs = mysql_query($search_clubs);
    echo json_encode(mysql_fetch_array($result_clubs));
    ?>
    ];
</script>

// Run the following code inside the focus.out section and set thisclub to the returned clubname

clubid = "";
$.each(clublist, function (i, elem) {
    if (elem.club_name === thisclub) {
        clubid = elem.club_id;
        $("#team-logo").attr("src", clubid+".png");
    }
});
if(clubid == "") {
    // show default image
    $("#team-logo").attr("src", "0.png");
}

第二次编辑（完整的工作示例）：

我测试了以下内容，我相信它包含了您正在寻找的所有内容。问题似乎是传递给json编码时php数组的格式化。密切关注HTML更改。

$sql = " SELECT club_id, club_name FROM clubs ORDER BY club_id DESC";

$result_clubs = mysql_query($sql);
if (!$result_clubs) {
    echo "Could not successfully run query ($sql) from DB: " . mysql_error();
    exit;
}
$clubs = array();
while($row = mysql_fetch_assoc($result_clubs)){
    $clubs[] = array('club_id' => $row['club_id'], 'club_name' => $row['club_name']);
}
?>

<img id="team-logo" src="logos/0.png"/>

<input id="clubname" type="text" class="club-name" name="home" autocomplete="off"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript">
var clubs = [ 
    <?php
    foreach($clubs as $club) {
        $club_name = $club['club_name'];
        echo '"'.$club_name.'",';
    }
    ?>
];    

var clublist =  <?php echo json_encode($clubs)?>;  //only returns one row

$(".club-name").autocomplete({
    source: clubs,
    autoFocus: true,
    minLength: 2,
    delay: 0,
    close: function(event, ui){
        if (!event.keyCode || event.keyCode === 13){
            $(this).parents('form').find('.club-name').filter(function (){
                return $(this).val() === '';
            }).first().focus();
            //
        }
        clubid = "";
        for(var i = 0; i < clublist.length; i++) {
            obj = clublist[i];
            if(obj.club_name == $("#clubname").val()){
                clubid = obj.club_id;
                $("#team-logo").attr("src", clubid+".png");
            } 
        }
        if(clubid == "") {
            // show default image
            $("#team-logo").attr("src", "0.png");
        }
    }
});
</script>

jquery - 根据文本输入更改图像

1 个答案: