使用帶有多個輸入字段的 jquery-ui 自動完成功能

Question

大家下午好！

我節省了很多時間，閱讀了 stackoverflow 上的所有帖子……但我無法使用 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);         
       }

Answer 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 演示

如果您想在答案中包含任何其他內容，請隨時發表評論。

編輯

你的代碼，

$('.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('');        
                }
            });
        }
    });
});