jquery-ui-autocomplete 相关问题

这很好用： $("#Term").autocomplete({ 来源：'/ws/words.json?lang=en' }); 这很好用： $("#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> 内容。是什么原因造成的？我能做什么？如果您希望删除元素内的 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>

javascript jquery jquery-ui-autocomplete

回答 1 投票 0

Jquery 自动完成：如何在页面加载时填写输入

我设置了一个jquery自动完成功能，它查询端点以获取输入中的选择（一旦您开始输入）： $("#brand-select").autocomplete({ 来源：函数（请求，响应）{ ...

javascript jquery html jquery-ui-autocomplete

回答 2 投票 0

具有多个输入的自动完成asp.net core

人！我真的需要帮助，我正在尝试在 ASP.NET Core 中使用多个输入进行自动完成，但目前我只能返回一个值。当我输入这个人的名字时我可以绑定...

javascript jquery asp.net-mvc asp.net-core jquery-ui-autocomplete

回答 1 投票 0

Symfony/bootstrap 中是否可以有一个自动完成文本框？ [已关闭]

我正在使用 Symfony 2.4 和 Braincrafted Bootstrap 捆绑包。我一直在寻找一种在 Bootstrap 中具有自动完成文本框的方法，但看来我需要一个外部库来执行此操作（“