jQuery 自动完成（ajax）在 SPA 中不起作用[重复]

Question

这很好用：

$("#Term").autocomplete({
  source: '/ws/words.json?lang=en'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css" />
<link href="https://code.jquery.com/ui/1.14.0/themes/redmond/jquery-ui.css" />
<div id="myform">
  <label for="Term">Term: </label>
  <input id="Term">
</div>

但是，当我删除

<div>

的内容并稍后使用从服务器传送的内容（包括

<input id="Term">

）（如在单页应用程序中）填充它时，自动完成功能将停止工作，即使我将自动完成脚本与新的

<div>

内容。是什么原因造成的？我能做什么？

Answer 1

如果您希望删除元素内的 HTML，您可以这样做，但是您需要附加到容器而不是元素。但是，您需要将元素添加回 IN，而您在示例中没有这样做。

在这里，我在一个可能有点丑陋的庄园里做这一切。

考虑只隐藏元素而不覆盖容器文本。

你问的问题：

const words = ["Hi", "By", "bye", "winter", "summer", "fall", "spring", "football", "boy", "friends"];
const template = document.getElementById("cool-auto-things");
const $myform = $("#myform");

$myform.on('add-autothings', function(event) {
  const $container = $(this);
  $container.textContent = "";
  const $termContainer = $container.find('.term-container');
  const templateClone = template.content.cloneNode(true);
  const container = document.getElementById("myform");
  const $terms = $(templateClone).find(".term");
  container.appendChild(templateClone);
  $terms.autocomplete({
    //  source: '/ws/words.json?lang=en'
    source: words
  }).on("autocompleteclose", function(event, ui) {
    const autodata = [{
      termValue: $(this).val()
    }];
    $container.trigger('got-completed', autodata);
  });
}).on('got-completed', function(event, myData) {
  const $container = $(this);
  $container.text($container.find('.term').val());
}).trigger('add-autothings');

.page-container {
  display: grid;
  place-items: center;
  margin: 1em;
}

.my-form {
  margin: 1em;
  padding: 1em;
  background-color: #00ff0022;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js" integrity="sha512-MlEyuwT6VkRXExjj8CdBKNgd+e2H+aYZOCUaCrt9KRk6MlZDOs91V1yK22rwm8aCIsb5Ec1euL8f0g58RKT/Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="page-container">
  <div id="myform" class="my-form"></div>
</div>
<template id="cool-auto-things">
  <label class="term-container">Term: <input class="term" /></label>
</template>

隐藏而不是删除它/用文本替换 - 你真正想问的感觉就像：

const words = ["Hi", "By", "bye", "winter", "summer", "fall", "spring", "football", "boy", "friends"];
const template = document.getElementById("cool-auto-things");
const templateClone = template.content.cloneNode(true);
const container = document.getElementById("myform");
const $myform = $("#myform");
const $terms = $(templateClone).find(".term");
container.appendChild(templateClone);
$terms.autocomplete({
  //  source: '/ws/words.json?lang=en'
  source: words
}).on("autocompleteclose", function(event, ui) {
  const autodata = [{
    termValue: $(this).val()
  }];
  $(this).closest('.my-form').trigger('got-completed', autodata);
}).focus();

$(".start-over").on("click", function(event) {
  $myform.trigger('add-autothings');
});

$myform.on('add-autothings', function(event) {
  const $container = $(this);
  const $termContainer = $container.find('.term-container');
  $container.find('.term-text').hide();
  const $term = $termContainer.find(".term");
  $term.val("");
  $termContainer.show();
  $term.focus();
}).on('got-completed', function(event, myData) {
  const $container = $(this);
  const $termContainer = $container.find('.term-container');
  $termContainer.hide();
  $(this).find('.term-text').text(myData.termValue).show();
});

.page-container {
  display: grid;
  place-items: center;
  margin: 1em;
}

.my-form {
  margin: 1em;
  padding: 1em;
  background-color: #00ff0022;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js" integrity="sha512-MlEyuwT6VkRXExjj8CdBKNgd+e2H+aYZOCUaCrt9KRk6MlZDOs91V1yK22rwm8aCIsb5Ec1euL8f0g58RKT/Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="page-container">
  <div id="myform" class="my-form"></div>
  <button type="button" class="start-over" data-target="#myform">Start Over</button>
</div>
<template id="cool-auto-things">
  <label class="term-container">Term: <input class="term" /></label>
  <span class="term-text"></span>
</template>