我想构建一个表单，允许用户从具有自动完成功能的预定义键中进行选择，例如搜索框: https://select2.org/selections
诀窍在于，一旦选择了一个键，用户就应该能够为该键输入一个值。提交后，表单将发送键/值对。
键的数量是动态的，最多可达 100 或 200。
从设计的 Angular 来看，谁能想出一个网站的例子来做这样的事情？从技术 Angular 来看，您将如何实现这一目标？
这个问题类似于Multiple Key Value Query Search Input Box ，只有那个问题一直没有答案，我也在从设计的 Angular 寻找想法或例子。
本质上类似于:querybuilder.js.org/demo.html。但是我只需要该功能的一个子集:它应该完全匹配，只支持“AND”，不需要组，并且键应该支持自动完成。理想情况下，用户可以只用他的键盘控制整个事情，而不需要鼠标来添加新的过滤器。
最佳答案
已经实现了一个示例
function AutoComplete(){
return {
"apple":'',
"cherry":'',
"watermelon": ''
}
}
function genListItem(key){
return "<li data-item='"+key+"'>"+key+"</li>";
}
function generateList(data){
var keys = Object.keys(data);
var list=[];
list.push("<ul>");
keys.forEach(function(key){
list.push(genListItem(key));
});
list.push("</ul>");
return list.join('');
}
function generateTag(key){
var span=[];
span.push("<span class='tagContainer'>");
span.push("<span>"+key+": </span>");
span.push("<span><input type='text' class='tagInput' name='"+key+"'/></span>");
span.push("<span class='closeBtn'><i class='fa fa-times-circle' aria-hidden='true'></i></span>")
span.push("</span>");
return span.join('');
}
$(document).ready(function(){
$('#search').on('click', function(){
var json = AutoComplete();
$("#autocomplete").html(generateList(json))
});
$("#autocomplete").on('click', 'li', function(){
var data = $(this).data('item');
$('#search').append(generateTag(data));
});
$("#search").on('click','.closeBtn', function(){
$(this).parent().remove();
});
});#search {
min-width:100px;
height:50px;
background: white;
border: 1px solid grey;
position:relative;
}
.tagContainer{
height: 30px;
line-height:30px;
padding: 5px;
border: 1px solid #cccccc;
margin:5px;
display:inline-block;
position:relative;
background: #eee;
}
.tagContainer:hover {
background-color: crimson;
color: white;
}
.tagInput {
width:50px;
height: 20px;
border:1px solid #ccc;
}
.closeBtn {
width:24px;
top:10px;
right:0;
display:inline-block;
margin-left:5px;
padding:2px 2px;
font-size:14px;
vertical-align: middle;
text-align:center;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' />
</head>
<body>
<div id="search"></div>
<div id='autocomplete'>
</div>
</body>
</html>关于javascript - 寻找从自动完成键发送用户指定值的表单示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46504478/