jquery-ui-autocomplete 相关问题

jQuery UI 使用外部 JSON 文件自动完成文本框中的多个值

我有兴趣实现此处找到的解决方案（jQuery UI Autocomplete Multiple Values in Textbox），但使用外部 JSON 文件而不是硬编码数据集。有人可以帮忙吗？

jQuery 在 Modal 上自动完成

当我单击#add 时，Bootstrap Modal 将打开。我想在模态中的输入框中显示自动完成功能。我的代码如下所示。 $('#add').on('点击', function () { var 选择器 = $('#addM...

Jquery-UI 自动完成设置所选文本为 0

我有一个表格，其中包含一行文本框 - 类别、制造商和型号。 当用户在模型字段中输入值时，我想显示一个自动完成框，显示与 wha 类似的匹配项...

自动完成功能，通过ajax回调结果循环遍历搜索词

我正在设置一个自动完成表单，其中我需要匹配每个关键字/术语。 我正在使用 ajax 回调来获取结果列表，并且尝试了许多解决方法将 json 结果转换为

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

这很好用： $("#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>

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

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

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

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

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

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

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

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

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

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

jquery ui-autocomplete 不显示下拉列表

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

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

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

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

我正在使用 jquery 自动完成。 我已将其设置为与服务连接并带回记录： <p>我正在使用 jquery 自动完成。 </p> <p>我已将其设置为连接服务并带回记录：</p> <pre><code>&lt;script src=&#34;https://code.jquery.com/jquery-1.12.4.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://code.jquery.com/ui/1.12.1/jquery-ui.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $( function() { $( &#34;#tags&#34; ).autocomplete({ source: &#34;/autocomplete/&#34;, minLength: 3, select: function( event, ui ) { } }); } ); &lt;/script&gt; </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>$( &#34;#tags&#34; ).autocomplete({ source: [&#34;Hello.&#34;,&#34;How are you?&#34;,&#34;Hi!&#34;], minLength: 1, select: function( event, ui ) { } });</code></pre> <pre><code>.ui-autocomplete .ui-menu-item{ font-style:italic; color:blue; }</code></pre> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js&#34;&gt;&lt;/script&gt; &lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css&#34; rel=&#34;stylesheet&#34;/&gt; &lt;input id=&#34;tags&#34;&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

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

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

JQuery 自动完成源未更新

我正在使用 jquery-ui 自动完成插件。 这是我实例化自动完成插件的方法。 //自动填充 $( "#TextArea" ).autocomplete({ 来源：“search.php?option=”+ opt...

如何在分隔行上显示自动完成每个属性的结果，而不是使用斜杠？

我从事 ASP.NET Web API 工作。当我使用 jQuery Ajax 请求调用 Web API 时，我遇到问题。 我的问题是自动完成结果显示用斜杠分隔： ID - 姓名 - 职务 但预计...

如何在 jQueryUI 中手动触发自动完成“选择”事件？

我正在使用 jQueryUI 自动完成，并且我有一个映射到选择事件的函数，例如： $("#someId").autocomplete({ 来源：一些数据， 选择：函数（事件，ui）{...}， 重点：功能...

区分键盘/鼠标触发的焦点事件

我正在使用 jquery ui 自动完成功能，想要破译由键盘交互和鼠标交互触发的焦点事件。我该怎么办呢？ $('输入').autocomplete({ 来源：

jQuery 自动完成源为空

用户选择州和城市后，将触发 Ajax 以从服务器检索数据。只有这样，我才允许他们使用 jQuery UI 自动完成功能搜索结果。 我填充一个名为

在 jQuery UI 自动完成列表的末尾添加自定义 div

我想在 jQuery 自动完成列表的末尾添加一个自定义 div 我尝试在 ul 下添加该自定义 div。 autoCompleteDiv.data("ui-autocomplete")._renderMenu = function (ul: JQuery, item...