我想在文本字段中列出名称，然后能够单击每个名称

Question

我正在尝试为 Firebase 上的项目创建一个管理站点。大多数站点的页面都有一个大文本字段，应该包含所有可以修改的当前项目。

例如：用户管理页面左侧有文本字段以显示用户的所有信息，右侧是一个大文本字段，我希望能够将用户名加载到其中然后能够 select一个并将该用户的信息从 Firebase 用户数据库加载到左侧字段中。然后我希望能够更改并保存这些值。

我目前的困境是我不明白如何实现右侧。我了解写入文本字段的基本过程，但是，我不知道如何才能使它们 select 可用。由于这在 Windows windows 中很常见，我知道有办法做到这一点，但我不知道怎么做。我对如何将名称分成单个对象也有点模糊。

我尝试创建的示例类似于 windows 卸载程序 window[或此 window 在属性中显示用户列表 window

https://i.stack.imgur.com/iGOjr.png

哪些命令可以帮助我实现我想要做的事情？

Answer 1

根据我对你的问题和你发布的图片的最佳理解，我创建了一个工作原型。这只是使用原版 JavaScript、HTML 和 CSS。我敢肯定它在实施中看起来会有些不同，但希望它足够接近，可以为您提供一个起点。

更新：

我根据 Sensoray 的评论更新了我的答案。

//create an object of users
let Users = [
  {
    "name": " Fro Doe",
    "id": "user1",
    "snack": "Chips"
  },
  {
    "name": " Mare Ree",
    "id": "user2",
    "snack": "Bananas"
  },
  {
    "name": " Sam Wise",
    "id": "user3",
    "snack": "Candy"
  },
]

//identify our list element
let list = document.querySelector('#user-list');

//loop through users in out Users object and add them to the list
for (var i = 0; i < Users.length; i ++) {
  let newItem = document.createElement('option');
  newItem.innerHTML = Users[i].name;
  newItem.id = Users[i].id;
  if (i == 0) {
    newItem.className = "active";
  }
  list.appendChild(newItem);
}

list.size = Users.length;

updateResponse(list.firstChild);

//collect all the list items
let listItems = list.querySelectorAll('option');

//loop through the list itmes and add a click listener to each that toggles the 'active' state
for (var i = 0; i < listItems.length; i ++) {
  listItems[i].addEventListener('click', function(e) {
    if (!e.target.classList.contains('active')) {
      for (var i = 0; i < listItems.length; i ++) {
        listItems[i].classList.remove('active');
      }
      e.target.classList.add('active');
      
      updateResponse(e.target);
    }
  })
}

function updateResponse(element) {
  //collect the response element
  let response = document.querySelector('#response');
  
  //collect each input from the response element
  responseId = response.querySelector('.response-id');
  responseName = response.querySelector('.response-name');
  responseSnack = response.querySelector('.response-snack');
  
  //find the matching user in the users object and update the inputs to match
  for (var i = 0; i < Users.length; i ++) {
    if (Users[i].id == element.id) {
      responseId.value = Users[i].id;
      responseName.value = Users[i].name;
      responseSnack.value = Users[i].snack;
    }
  }
  
}

function updateUser() {
    //collect the response element
  let response = document.querySelector('#response');
  
  //collect each input from the response element
  responseId = response.querySelector('.response-id');
  responseName = response.querySelector('.response-name');
  responseSnack = response.querySelector('.response-snack');
  
  //update the js object values
  for (var i = 0; i < Users.length; i ++) {
    if (Users[i].id == responseId.value) {
      Users[i].name = responseName.value;
      Users[i].snack = responseSnack.value;
    }
  }
  
  //update the list
  //find current list item
  let curItem = list.querySelector('#'+responseId.value);
  //update the text on the item
  curItem.innerText = responseName.value;
  
  //keep the page from redirecting
  return false;
}

body {
  font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

h1 {
  font-family: "Segoe UI Variable Display", system-ui, ui-rounded, sans-serif;
  font-weight: 500;
}

@media only screen and (max-width: 500px) {
  .parent {
    grid-template-columns: auto;
  }
}

select {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ABABAB;
  border-radius: 8px;
  overflow: auto;
  width: 100%;
}
option {
  padding: 8px 4px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
}

<div class="parent">
  <div class="right">
    <h1>Users:</h1>
    <select name="user-list" size="3" id="user-list"></select>
  </div>
  <div class="left">
    <h1>User Info:</h1>
    <form id="response" onsubmit="return updateUser()">
      <label for="id">User ID:</label><input type="text" name="id" class="response-id" disabled></input>
      <label for="name">User Name:</label><input type="text" name="name" class="response-name"></input>
      <label for="snack">User's Favorite Snack:</label><input type="text" name="snack" class="response-snack"></input>
      <input type="submit" value="Save">
    </form>
  </div>
</div>

我想在文本字段中列出名称，然后能够单击每个名称

I want to make a list of names in a textfield and then be able to click on each name

html

javascript

css

textfield

firebase

更新：