javascript - jquery - 根据文本输入改变图像

Question

我有一个 mysql 表，其中一列是团队名称 (club_name)，另一列是 id (club_id)。 每个团队都有一个以其各自的 id .png 命名的 Logo 。

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

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

编辑:

我现在遇到三个问题:

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

方法如下(虽然它只返回表格的一行它确实有效，但图像会更改为适当的一行 - 我通过将“thisclub”替换为俱乐部名称进行了一些测试):

<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 对象中的所有行，但是当我通过将“thisclub”替换为一个俱乐部的名称来运行相同的测试时，这个方法不起作用):

<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>

1. 第二个问题是我不知道用什么来代替“thisclub”。 也就是说，如何获取函数返回的值。
2. 我现在使用两个变量 - 一个仅存储俱乐部名称，用于原始功能，另一个用于俱乐部名称和各自的 ID，用于使图像发生变化的功能。这是因为我不知道要对原始函数进行哪些更改，以便它在新变量(也包含 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。

然后在 focus out 上你可以按照以下方式做一些事情:

$("#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>