Javascript 根据从自动完成输入中选择的项目创建html选择

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

当我回显这个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>

所以我需要的是用所选水果的大小创建HTML select

点击食物后，是否可以在同一页面上动态制作？

---

谢谢大家!

试试这个例子，我把点击事件改成了模糊，感觉有点舒服。当然，您可以实现自己的行为。请检查结果以获取一些有效的水果名称，然后重试

const input=document.querySelector（'input'）；
输入。addEventListener（“模糊”，把手模糊）；
功能把手（事件）{
const options=getOptions（event.target.value）；
如果（选项）{
普选（选项）；
}
}
函数populateSelect（选项）{
const select=document.querySelector（'select'）；
const opts=options.map（option=>`${option}`）。join（“”）；
select.innerHTML=opts；
}
函数getOptions（键）{
如果（！键）{
回来
}
常量集合=[
{
“成功”：没错，
“结果”：[{
“名称”：“香蕉，生的”，
“选项1”：“克”，
“选项2”：“盎司”，
“选项3”：“小尺寸”，
“选项4”：“中等尺寸”，
“选项5”：“大尺寸”
}]
}, {
“成功”：没错，
“结果”：[{
“名称”：“芒果，生的”，
“选项3”：“小尺寸”，
“选项4”：“中等尺寸”，
“选项5”：“大尺寸”
}]
}, {
“成功”：没错，
“结果”：[{
“名称”：“梨，生的”，
“选项1”：“克”，
“选项2”：“盎司”，
}]
},
];
const options=collection.find（data=>data.results[0].name.toLocaleLowerCase（）==key.toLocaleLowerCase（））.results[0]；
删除options.name
返回Object.value（选项）；
}

请：您是否搜索如下内容：？@ChrisP，自动完成功能正常。如果可能的话，我想做的是根据选择的输入创建一个选择。@mplungjan这里不是自动完成的问题，它是在单击HTML选择后创建的，具体取决于选择的内容。。如果我没有注意到一些明显的问题，我很抱歉，我是javascript新手…谢谢你的时间和回答！我想这可能会对我有所帮助，但代码片段不起作用。。。我是javascript新手，顺便说一句，我只知道php。它的工作原理，例如键入

Mango，raw

，当输入失去焦点时，将填充select标记，您也可以尝试使用

香蕉，raw

和

梨，raw

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