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 中具有自动完成文本框的方法，但看来我需要一个外部库来执行此操作（“

php twitter-bootstrap symfony jquery-ui-autocomplete symfony-2.4

回答 1 投票 0

如何在 JQuery UI 自动完成中使用 source: function()... 和 AJAX

我需要一些有关 JQuery UI 自动完成的帮助。我希望我的文本字段 input.suggest-user 显示来自 AJAX 请求的名称。这就是我所拥有的： jQuery("input.suggest-user").autocomp...

javascript jquery ajax jquery-ui jquery-ui-autocomplete

回答 8 投票 0

如何在change事件上获取jQuery下拉值

我添加了两个 jQuery UI 下拉自动完成脚本。现在我想获取第二个下拉列表的更改值并希望单独存储在变量中。怎么可能呢？有什么想法或建议吗？

jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

回答 6 投票 0

jquery ui-autocomplete 不显示下拉列表

我们正在运行 tharuvi.com 在搜索框中，用户界面自动完成下拉菜单突然停止工作。服务器正在返回查询集，但 jquery 没有执行响应部分。我的 html 表单： ...

jquery jquery-ui-autocomplete

回答 1 投票 0

jQuery-Autocomplete - 选择项目时显示下拉列表

我正在使用 jQuery 自动完成。它工作正常，当字段为空时，它会显示焦点上的下拉菜单，但当已选择某个项目时，它不会显示它。我希望它打开与否

javascript jquery jquery-ui-autocomplete

回答 1 投票 0

如何将样式应用于 jquery 自动完成下拉列表

我正在使用 jquery 自动完成。我已将其设置为与服务连接并带回记录： <p>我正在使用 jquery 自动完成。 </p> <p>我已将其设置为连接服务并带回记录：</p> <pre><code><script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#tags" ).autocomplete({ source: "/autocomplete/", minLength: 3, select: function( event, ui ) { } }); } ); </script> </code></pre> <p>下拉列表返回时没有任何样式。</p> <p>这里的文档：<a href="http://api.jqueryui.com/autocomplete/" rel="nofollow noreferrer">http://api.jqueryui.com/autocomplete/</a>只关注JS方面。</p> <p>如何将样式应用于返回结果的下拉列表？</p> </question> <answer tick="false" vote="0"> <p>这是我在这里找到的一个很好的例子：<a href="https://stackoverflow.com/questions/5409788/jquery-autocomplete-result-style">JQuery 自动完成结果样式</a></p> <pre><code>.ui-autocomplete { position: absolute; cursor: default; background:#CCC } /* workarounds */ html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } </code></pre> </answer> <answer tick="false" vote="0"> <p>自动完成下拉列表是具有类 <pre><code>li</code></pre> 的 <pre><code>ui-menu-item</code></pre> 元素。</p> <p>尝试在下面的代码片段中使用“H”。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$( "#tags" ).autocomplete({ source: ["Hello.","How are you?","Hi!"], minLength: 1, select: function( event, ui ) { } });</code></pre> <pre><code>.ui-autocomplete .ui-menu-item{ font-style:italic; color:blue; }</code></pre> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <input id="tags"></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript jquery css jquery-ui-autocomplete

回答 0 投票 0

更改事件上的 jQuery UI 自动完成功能未实时触发

使用 jQuery UI，我试图在 #tag 输入的值发生更改时立即触发一个事件，但是正如您所看到的，如果用户单击页面，而不是在 in 的值发生变化时，日志事件就会触发。 ...

javascript jquery jquery-ui jquery-ui-autocomplete

回答 2 投票 0

jquery-ui-autocomplete 相关问题

最新问题