使用带有多个输入字段的 jquery-ui 自动完成

Posted 2023-02-24

【中文标题】使用带有多个输入字段的 jquery-ui 自动完成

【英文标题】：using jquery-ui autocomplete with multiple input fields

【发布时间】：2014-08-30 15:36:52

【问题描述】：

大家下午好！

我节省了很多时间，阅读了 *** 上的所有帖子...我无法使用 multilpe 输入字段进行自动完成。 我试图为每个输入分配一个“autoc”类，我为每个字段使用不同的 id（实际上是 php 循环生成字段的 inedx）。 我没有要求别人为我做这项工作....只是一个工作示例。

提前致谢。

PS : 我为我糟糕的英语道歉......

现在跟随一段 html ：

    <input id="search_ctO" class="autoc" type="text" name="search_ct[]">
    <input id="search_ct1" class="autoc" type="text" name="search_ct[]">
    <input id="search_ct2" class="autoc" type="text" name="search_ct[]">
    ....
    <input id="search_ctn" class="autoc" type="text" name="search_ct[]">

和 jquery ：

    $('.autoc').on("focus", function()   
      $(this).autocomplete(
       minLength: 2,
       source: 'liste_contact.php',
       select: function( event, ui )   
         $('.autoc #search_ct').val( ui.item.label ); //id="search_ct'.$i.'
         $(".autoc #contact_id").val( ui.item.value ); //
         $("autoc #contact_description").val( ui.item.desc );
         return false;
       ,  
      change: function() 
         var servi = $("#service_id").val();
         var hop = $('#hop').val();
         var contact = $("#contact_id" ).val();
         $.ajax(
           url: 'ajout_contact.php',
           data: "serv="+ servi+"&hopit=" + hop+"&contact="+ contact+"",// on envoie la requete d'ajout de contact

         success: function() 
               $("#search_ct").val('');
               // location.reload(true);         
       

【参考方案1】：

如果不知道确切的 HTML 和传递给 autocomplete 源的对象数组，很难准确地编写代码。

但是，您已经询问了 autocomplete 是否适用于多个字段，所以这里只是一个简单的示例：

HTML

<input id="search_ctO" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct1" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct2" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ctn" class="autoc" type="text" name="search_ct[]"/>

JS

var tags = ["abc","def","xyz"];
$('.autoc').on("focus", function()
      $(this).autocomplete(
       minLength: 2,
       source: tags
        );
);

JSFIDDLE DEMO

如果您想在回答中包含任何其他内容，请随时发表评论。

编辑

您的代码，

$('.autoc').on("focus", function() 
    $(this).autocomplete(
        minLength: 2,
        source: 'liste_contact.php',
        select: function( event, ui )   
            $('.autoc #search_ct').val( ui.item.label );
            $(".autoc #contact_id").val( ui.item.value );
            $(".autoc #contact_description").val( ui.item.desc );
            return false;
        ,  
        change: function()  
            var servi = $("#service_id").val();
            var hop = $('#hop').val();
            var contact = $("#contact_id" ).val();
            $.ajax(
                url: 'ajout_contact.php',
                data: "serv="+servi+"&hopit="+hop+"&contact="+contact+"",
                success: function() 
                    $("#search_ct").val('');        
                
            );
        
    );
);

【讨论】：

事实上，自动完成的下拉列表工作正常...我的问题是“如何恢复所选项目”...抱歉我的需求表达不正确

你应该为此写一个相应的问题。你应该告诉我们你到底在哪里遇到问题，即使是非常微小的。因此，请明确您想对所选项目做什么。此外，您的代码中存在语法错误。如果不是错别字，请先更正。

我为迟到的复出道歉...按照您的建议更正我的代码使这些东西像魅力一样工作。非常感谢。您认为发布工作代码和 cmets 有用吗？如果是的话，该怎么做（我是*** neebie）

一般来说，如果您得到任何问题的答案，这是回答您自己的问题并将其标记为已接受答案的一般方法。由于您的代码中有语法错误，因此我在此处自行添加该代码，如果您愿意，可以将其标记为已接受或创建您自己的正确答案。这将有助于任何其他未来的读者遵循本文中的解决方案。

@j809 我喜欢这个类的定义。我得到了它的工作。我想添加一个选择语句来找出我的哪个字段正在调用自动​​完成 jquery 函数。我该怎么做？