jQuery自動完成多個輸入組

Question

<form id="form1">
        <input type="text" name="idEmp[]" class="idEmp">
        <input type="text" name="nameEmp[]" class="nameEmp">

        <input type="text" name="idEmp[]" class="idEmp">
        <input type="text" name="nameEmp[]" class="nameEmp">
    </form>

和這里的jQuery

$('.idEmp').on("focus", function(){
            $(this).autocomplete({
                minLength: 1,
                source: "autocomplete.php",
                focus: function(event, ui){
                    $(this).val(ui.item.id);
                    return false;
                },
                select: function(event, ui){
                    $(this).val(ui.item.id);
                    // something else here to show name in nameEmp fields
                    return false
                }
            })
            .autocomplete("instance")._renderItem = function(ul, item){
                return $("<li class='list-group-item list-group-item-info'>")
                .append("<a><h5>Emp. ID : "+item.id+"<br><span class='badge'>"+item.name+"</span></h5></a>")
                .appendTo(ul);
            };
        });

我想在每個idEmp類中應用jQuery自動完成功能，然后ID的值出現在idEmp []中，而值的名稱出現在nameEmp []中。 有人知道嗎？ 提前致謝！

Answer 1

開始輸入jQuery並選擇autocomplete選項，然后將使用標簽和描述填充字段，使用下面的代碼作為您代碼的參考。

 var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $( ".idEmp" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( this ).val( ui.item.label ); $( this ).next( ".nameEmp" ).val( ui.item.desc ); return false; } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"></link> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> Start typing jQuery and select the autocomplete option <form id="form1"> <input type="text" name="idEmp[]" class="idEmp"> <input type="text" name="nameEmp[]" class="nameEmp"><br/> <input type="text" name="idEmp[]" class="idEmp"> <input type="text" name="nameEmp[]" class="nameEmp"> </form>