时间戳

首页 > 解决方案 > 根据从自动完成输入中选择的项目创建一个 html 选择

javascript - 根据从自动完成输入中选择的项目创建一个 html 选择

问题描述

我目前有一个搜索数据库并通过 JSON 在自动完成输入中返回结果的 php 页面：

在此处输入图像描述

当我回显这个 php 文件的响应时（对于上面的示例），我得到以下信息：

{
    "success": true,
    "results": [{
        "name": "Bananas, raw"
    }]
}

这种水果有五种份量存储在数据库中。我需要的是在单击后创建其特定的 HTML SELECT：

<select>
   <option>grams</option>
   <option>oz</option>
   <option>small size</option>
   <option>medium size</option>
   <option>large size</option>
</select>

份量都存储在数据库中，每种食物的份量都不同。

注意：我可以在同一个 php 文件中读取所需的选项并将它们放入 JSON 结果中，如下所示：

{
    "success": true,
    "results": [{
        "name": "Bananas, raw",
        "option1": "grams",
        "option2": "oz",
        "option3": "small size",
        "option4": "medium size",
        "option5": "large size"
    }]
}

因此，我需要使用所选水果的份量创建 HTML 选择。

点击食物后，可以在同一页面上动态制作吗？谢谢！

标签： javascriptphpjson

解决方案

试试这个例子，在这里我将点击事件更改为模糊，感觉更舒服一点。当然，您可以实现自己的行为。请检查一些有效水果名称的结果以尝试

const input = document.querySelector('input');

input.addEventListener('blur', handleBlur);

function handleBlur(event) {
    const options = getOptions(event.target.value);

    if (options) {
        populateSelect(options);
    }
}

function populateSelect(options) {
    const select = document.querySelector('select');
    const opts = options.map(option => `<option value=${option}>${option}</option>`).join('');

    select.innerHTML = opts;
}

function getOptions(key) {
    if (!key) {
        return;
    }

    const collection = [
        {
            "success": true,
            "results": [{
            "name": "Bananas, raw",
                "option1": "grams",
                "option2": "oz",
                "option3": "small size",
                "option4": "medium size",
                "option5": "large size"
            }]
        }, {
            "success": true,
            "results": [{
            "name": "Mango, raw",
                "option3": "small size",
                "option4": "medium size",
                "option5": "large size"
            }]
        }, {
            "success": true,
            "results": [{
            "name": "Pear, raw",
                "option1": "grams",
                "option2": "oz",
            }]
        },
    ];

    const options = collection.find(data => data.results[0].name.toLocaleLowerCase() === key.toLocaleLowerCase()).results[0];

    delete options.name

    return Object.values(options);
}
<input type="text" id="filter">
<select name="option" id="option"></select>

我会建议您是否可以修改单击输入时获得的 json 的结构。例如，如果您将结果对象的名称属性放在对象的第一级，则可以避免像示例中那样操作对象。在结果中这样做只会有所选水果的选项。

推荐阅读