Javascript 排序和添加输入,如谷歌获取方向
我正在尝试使用下面的屏幕截图这样的链接“AddDestination”来创建动态可排序列表。最大的问题是,在已排序的输入中,应该维护序列ID,并且在拖动后更改内容。输入可以在“A”之前拖动,最后在“x”右侧字段中删除。添加额外的航路点,可以这样判断:教程应该是JavaScript中的数组,航路点总是中间的“A”和最后一个字段,输入点“A”总是名称,例如“from”,最后一个“goal”。我想用自动建议的方式填写后面的字段。我到处寻找解决方案,但它太不一样了 编辑:我收集了来自不同来源的所有信息,结果不是很好的代码:Javascript 排序和添加输入,如谷歌获取方向,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我正在尝试使用下面的屏幕截图这样的链接“AddDestination”来创建动态可排序列表。最大的问题是,在已排序的输入中,应该维护序列ID,并且在拖动后更改内容。输入可以在“A”之前拖动,最后在“x”右侧字段中删除。添加额外的航路点,可以这样判断:教程应该是JavaScript中的数组,航路点总是中间的“A”和最后一个字段,输入点“A”总是名称,例如“from”,最后一个“goal”。我想用自动建议的方式填写后面的字段。我到处寻找解决方案,但它太不一样了 编辑:我收集了来自不同来源的所有信息,
以下是一个完整的工作示例: 我提出的HTML:
<div id="sortable" class="isOnlyTwo">
<div class="destination">
<span class="handle">A</span>
<input type="text" name="dest1" value="" />
<a href="#" class="remove_input">×</a>
</div>
<div class="destination">
<span class="handle">B</span>
<input type="text" name="dest2" value="" />
<a href="#" class="remove_input">×</a>
</div>
</div>
<a href="#" id="add_input">Add Destination</a>
为了保持输入
的名称
属性和顺序字母(A、B、C…)的正确顺序,我们在排序更新和删除目标时调用重新计算顺序
为了防止删除最后两个目的地,当只剩下两个目的地时,我们向#sortable
div添加一个isOnlyTwo
类。由于我们的CSS隐藏了remove\u输入
对于我们需要的自动完成
如何在google get directions上创建这样的输入字段列表?在$(“#sortable input”,this).attr(“name”,function(i){i remove“this”行中。
#add_input
{
text-decoration:none;
color:#15C;
margin-left:35px;
}
#add_input:hover
{
text-decoration:underline;
}
.placeholder
{
border:2px dashed #bfbfbf;
margin:5px;
width:240px;
}
.handle
{
background-color:#06B500;
border:2px solid #3D7311;
cursor:n-resize;
padding:0 3px;
border-radius:99px;
font-size:12px;
}
.destination
{
margin:5px 15px;
}
.destination input
{
border:1px solid #B9B9B9;
width:200px;
}
#sortable.isOnlyTwo .remove_input
{
display:none;
}
.remove_input
{
color:#999;
text-decoration:none;
font-weight:bold;
}
.remove_input:hover
{
color:#666;
}
.destination.ui-sortable-helper
{
opacity:0.8;
filter:alpha(opacity=80);
}
.destination.ui-sortable-helper .remove_input
{
display:none;
}
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
$(function(){
$("#sortable").sortable({
containment: "document",
placeholder: 'placeholder',
handle: ".handle",
axis: "y",
update: RecalculateOrder,
forcePlaceholderSize: true
});
$("#add_input").click(function () {
var inputIndex = $("#sortable > .destination").length;
// Building the new field's HTML
var html = '<div class="destination">';
html += '<span class="handle">' + String.fromCharCode(inputIndex + 65) + '</span> ';
html += '<input type="text" name="dest' + (inputIndex + 1) + '" value="" /> ';
html += '<a href="#" class="remove_input">×</a>';
html += '</div>';
var newField = $(html);
newField .find(".remove_input").click(RemoveInput);
$("#sortable").append(newField ).removeClass("isOnlyTwo");
// Adding autocomplete to the new field
BindAutoComplete(newField.find("input")[0]);
return false;
});
$(".remove_input").click(RemoveInput);
// Adding autocomplete to the first two fields
$("#sortable input").each(function(){
BindAutoComplete(this);
});
function RemoveInput()
{
$(this).parent().remove();
RecalculateOrder();
var isOnlyTwo = $("#sortable > .destination").length == 2;
$("#sortable").toggleClass("isOnlyTwo", isOnlyTwo);
return false;
}
// Recalculating from scratch the fields order
function RecalculateOrder()
{
$("#sortable .handle").text(function(i) {
return String.fromCharCode(i + 65);
});
$("#sortable input").attr("name", function(i){
return "dest" + (i + 1);
});
}
function BindAutoComplete(input)
{
var autocomplete = new google.maps.places.Autocomplete(input);
}
});