自动补全中的第二个_renderItem没有响应

时间:2019-06-27 08:19:44

标签: javascript jquery

我想使用_renderItem函数具有两个或三个具有不同数据的自动完成输入。我在代码中放了两次,但是没有用。

可能我认为我可以使用.each方法,但我不知道具体如何。

$( function() {
    var account = [
      {
        value: "95 3232 2300 1000 1209 4020 3243",
        number: "95 3232 2300 1000 1209 4020 3243",
        name: "account",
        idnumber: "ABC my id",
        saldo: "23 492,98",
        address: "<span>Address</span>",
        icon: "jquery_32x32.png"
      }
    ];

    $( "#account" ).autocomplete({
      minLength: 0,
      source: account,
      focus: function( event, ui ) {
        $( "#account" ).val( ui.item.number );
        $( "#account-saldo" ).val( ui.item.number );
        return false;
      },
      select: function( event, ui ) {
        $( "#account" ).val( ui.item.number );
        $( "#account-id" ).val( ui.item.value );
        $( "#account-name" ).html( ui.item.name );
        $( "#account-idnumber" ).html( ui.item.idnumber );
        $( "#account-address" ).html( ui.item.address );
        $( "#account-description" ).html( ui.item.desc );
        $( "#account-vat" ).html( ui.item.vat );
        $( "#account-saldo" ).val( ui.item.saldo );
        $( "#account-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div class='names'>" + "<span class='number'>" + item.number + "</span>" + "<span class='name'>" + item.name + " (" + item.idnumber + ")" + "</span>" + "</div>" + "<div class='saldo'>" +  item.saldo + "</div>")
        .appendTo( ul );
    };
  } );


  // recipient

  $( function() {
      var recipient = [
        {
          value: "Company name",
          recipientnumber: "Company name",
          recipientidnumber: "ABC",
          trustworthy: "yes",
          address: "<span>Adress</span>",
          icon: "jquery_32x32.png"
      ];

      $( "#recipient" ).autocomplete({
        minLength: 0,
        source: recipient,
        focus: function( event, ui ) {
          $( "#recipient" ).val( ui.item.recipientnumber );
          $( "#recipient-trustworthy" ).val( ui.item.recipientnumber );
          return false;
        },
        select: function( event, ui ) {
          $( "#recipient" ).val( ui.item.recipientnumber );
          $( "#recipient-id" ).val( ui.item.value );
          $( "#recipient-idnumber" ).html( ui.item.recipientidnumber );
          $( "#recipient-address" ).html( ui.item.address );
          $( "#recipient-description" ).html( ui.item.desc );
          $( "#recipient-vat" ).html( ui.item.vat );
          $( "#recipient-trustworthy" ).val( ui.item.trustworthy );
          $( "#recipient-icon" ).attr( "src", "images/" + ui.item.icon );

          return false;
        }
      })
      .autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li>" )
          .append( "<div class='names'>" + "<span class='number'>" + item.recipientnumber + "</span>" + "<span class='name'>" + item.recipientidnumber + "</span>" + "</div>" + "<div class='trustworthy'>" +  item.trustworthy + "</div>")
          .appendTo( ul );
      };
    } );

我需要回答我如何才能准确地获得两个具有不同数据的不同自动完成输入的效果。

0 个答案:

没有答案