主页 / 问题 / 1049184
Accepted
KordDEM
Asked:2020-11-22 12:36:07 +0000 UTC2020-11-22 12:36:07 +0000 UTC

数据，重新打开窗口时标签中城市的浮动名称

  • 772

引导模式有一个选择的城市列表。在输入中，我们通过 cladr 代码添加搜索，其中我们还将城市名称添加到标签中。第一次打开窗口时，标签定位正确，再次打开时，标签向下超出输入，但当光标放在输入或更改城市时返回原位。编码

$('.addBtn').on('click', function() {

  let kladr = $('#city').find(':selected').val().toString();
  let city = $('#city').find(':selected').text();
  enforceCity(kladr, city);
  
  $("#myModalBox").modal('show');
})

let token = "7fd18aaabd7d53ffa4846e4521c1f736c13490eb";

$("#address").suggestions({
  token: token,
  type: "ADDRESS"
});

$('#city').on('change', function(){
  let kladr = $('#city').find(':selected').val().toString();
  let city = $('#city').find(':selected').text();
  enforceCity(kladr, city);
})


function enforceCity(kladr, city){
	let tempSearch = $("#address").suggestions();
	tempSearch.clear();
	tempSearch.setOptions({
		constraints: {
    label: city,
			locations: { 
				kladr_id: kladr 
			}
		},
		restrict_value: true
	});
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.8.0/dist/css/suggestions.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.8.0/dist/js/jquery.suggestions.min.js"></script>
<span class="glyphicon glyphicon-plus addBtn"></span>

<div id="myModalBox" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="sel1">Выбрать город:</label>
          <select class="form-control" id="city">
            <option value="7700000000000">Челябинск</option>
            <option value="5200000100000">Нижний Новгород</option>
            <option value="6300000100000">Самара</option>
          </select>
        </div>
        <div class="form-group">
          <label for="address">Адрес</label>
          <input type="address" class="form-control" id="address" placeholder="Введите адрес">
        </div>
      </div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    问题出在模态窗口出现时的动画中。脚本在动画过程中计算了元素的位置，所以是错误的。

    窗口出现后需要更新元素的位置。

    $('.addBtn').on('click', function() {

  let kladr = $('#city').find(':selected').val().toString();
  let city = $('#city').find(':selected').text();

  $("#myModalBox").modal('show');
  enforceCity(kladr, city)
})

let token = "7fd18aaabd7d53ffa4846e4521c1f736c13490eb";

$("#address").suggestions({
  token: token,
  type: "ADDRESS"
});

$('#city').on('change', function() {
  let kladr = $('#city').find(':selected').val().toString();
  let city = $('#city').find(':selected').text();
  enforceCity(kladr, city);
})


function enforceCity(kladr, city) {
  let tempSearch = $("#address").suggestions();
  console.log(tempSearch);
  tempSearch.clear();
  tempSearch.setOptions({
    constraints: {
      label: city,
      locations: {
        kladr_id: kladr
      }
    },
    restrict_value: true
  });
  setTimeout(() => tempSearch.fixPosition(), 150);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.8.0/dist/css/suggestions.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.8.0/dist/js/jquery.suggestions.min.js"></script>
<span class="glyphicon glyphicon-plus addBtn"></span>

<div id="myModalBox" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="sel1">Выбрать город:</label>
          <select class="form-control" id="city">
            <option value="7700000000000">Челябинск</option>
            <option value="5200000100000">Нижний Новгород</option>
            <option value="6300000100000">Самара</option>
          </select>
        </div>
        <div class="form-group">
          <label for="address">Адрес</label>
          <input type="address" class="form-control" id="address" placeholder="Введите адрес">
        </div>
      </div>
    </div>
  </div>
</div>

    • 1

相关问题