时间戳

首页 > 解决方案 > 通过节点 js 中的 JavaScript 的 Html datalist 选项

node.js - 通过节点 js 中的 JavaScript 的 Html datalist 选项

问题描述

我想在 datalist 选项中从 MySQL 数据库传递数据。我的应用程序是使用 ejs 视图用 express js 编写的。我不知道如何将数据库值传递给 JavaScript 中的列表以及如何将此列表传递给 ejs 文件。

add.js：

module.exports = {
  addProductPage: (req, res) => {
    let query = "SELECT shipper_names.Shipper_ID, shipper_names.Shipper_Name FROM shipper_names";
    conn.query(query, (err, results) => {
      if (err) {
        return res.status(500).send(err);
      }
      res.render('add-product.ejs', {
        title: "Add Product",
        shipper_names: results[0],
        message: ''
      });
    });
  }
}

EJS 文件：

<!doctype html>
<html lang="en">

<div>
  <a class="float-right" href="/" title="Home">Home</a>
</div>

<div class="contnainer">
  <% if (message) {%>
    <p class="text-container text-danger">
      <%= message %>
    </p>
    <%}%>
      <% if (shipper_names) {%>

        <form class="add-player-form" action="" method="POST" enctype="multipart/form-data">
          <div>
            <input type="text" id="shippers_names" list="languageList" />
            <!--your input textbox-->
            <datalist id="languageList">
                    <option value="">  </option>
                    </datalist>
          </div>
          <button type="submit" class="btn">Add Product</button>
        </form>
        <% } else { %>
          <p class="text center">Product Not Found. Go <a href="/add">Here</a>To Add Product.</p>
          <% } %>
</div>

</html>

标签： node.js

解决方案

module.exports = {
  addProductPage: (req, res) => {
    let query = "SELECT  * from shipper_names"
    conn.query(query, (err, results) => {
      if (err) {
        return res.status(500).send(err);
      }
      res.render('add-product.ejs', {
        shipper_names: results
      });
    });
  },
        <div>
            <input type="text" id="txtAutoComplete" list="names" />
            <!--your input textbox-->
            <datalist id="names">
                <% shipper_names.forEach((shipper_names, index)=>{%>
                <option id=<%= shipper_names.Shipper_ID%>>
                    <%= shipper_names.Shipper_Name%></option>
                <%})%>
            </datalist>
        </div>

这是有效的

推荐阅读