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 []中，值name出现在nameEmp []中。有谁知道这个？提前谢谢！

Answer 1

开始输入jQuery并选择自动填充选项，然后填写标签和说明字段，使用下面的代码作为代码的参考。

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>

jquery自动完成多个输入组

1 个答案: