jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？

Posted 2023-02-24

【中文标题】jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？

【英文标题】：jquery - How to add image to the Select2 dropdown list with data retreived from MySQL and PHP through AJAX?

【发布时间】：2020-04-12 12:22:12

【问题描述】：

我想在我创建的可搜索下拉列表中的选项前面添加一张图片。该列表由通过 php 和 AJAX 检索的 mysql 数据库中的数据填充。我正在使用 Select2 插件来解决这个问题，并且我成功地使其与数据库中的简单数据一起工作，但我不知道如何将图像（图像的链接存储在数据库中）添加到选项中。我读过这个article，但我不知道如何将这些信息实现到我的代码中。

这是我到目前为止所做的：

HTML

<select id="js-hieroglyph-code-select" name="hieroglyph-code-input" data->
    <option value="" selected disabled>Select hieroglyph code</option>
</select>

JS/Jquery

$("#js-hieroglyph-code-select").select2(
    ajax : 
        url : "./includes/individual_retrieve_scripts/retrieve_hieroglyph_undefined.script.php",
        type : "POST",
        dataType : "json",
        delay : 250,
        data : function(params)
            return 
                hieroglyphCodeValue : params.term
            ;
        ,
        processResults : function(response)
            return 
                results : response
            ;
        ,
        cache : true
     
);

PHP

$data = array(["id" => "0", "text" => "Hieroglyph without code"]);

while ($row = mysqli_fetch_array($fetchData)) 
    $data[] = array(
        "id" => $row["undefined_hieroglyph_code"],
        "text" => $row["undefined_hieroglyph_code"]
    );


echo json_encode($data);
exit();

为了方便，我特意省略了PHP代码中的数据库查询部分，但我认为这里的问题并不重要。

我想过在 PHP 中连接图像链接数据和文本数据，然后在 javascript 中将其分离，但这只是一个想法，我不知道如何进一步使用分离的数据。像这样的：

while ($row = mysqli_fetch_array($fetchData)) 
    $data[] = array(
        "id" => $row["undefined_hieroglyph_code"],
        "text" => $row["undefined_hieroglyph_code"]."/".$row["image_link"]
    );

这个问题有解决办法吗？

【参考方案1】：

我建议你看看 select2 templateResult 选项here 您应该首先将图像的 URL 作为单独的键添加到结果中，然后在模板化您的 select2 的函数中使用它

while ($row = mysqli_fetch_array($fetchData)) 
$data[] = array(
    "id" => $row["undefined_hieroglyph_code"],
    "text" => $row["undefined_hieroglyph_code"],
    "imageUrl" => $row["image_link"]
);

【讨论】：

谢谢，但我仍然不明白应该在哪里以及如何将这个 templateResult 放在我的 JS 代码中以便它可以工作。