Question

这是jQuery在同一个表中使用多个输入的自动完成。当我在商品代码中选择1000时，它将帮助我自动完成项目描述，项目价格。

然而，当我添加第二项时，它允许用户输入与之前相同的项目代码。当用户使用之前的商品代码输入相同的商品代码时，如何提醒错误。

我尝试了很多方法，但仍然无法正常工作。任何人都知道请帮帮我。谢谢!!以下是源代码。

＆＃13;

drawn<-sample(0:1,size=1,prob=c(red,blue)/(red+blue))
red<-red+(1-drawn);
blue<-blue+(drawn);

＆＃13;

$(document).ready(function(){

    // Use the .autocomplete() method to compile the list based on input from user
    $('#itemCode').autocomplete({
        source: 'data/item-data.php',
        minLength: 1,
        select: function(event, ui) {
            var $itemrow = $(this).closest('tr');
                    // Populate the input fields from the returned values
                    $itemrow.find('#itemCode').val(ui.item.itemCode);
                    $itemrow.find('#itemDesc').val(ui.item.itemDesc);
                    $itemrow.find('#itemPrice').val(ui.item.itemPrice);

                    // Give focus to the next input field to recieve input from user
                    $('#itemQty').focus();

            return false;
	    }
    // Format the list menu output of the autocomplete
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
            .appendTo( ul );
    };

    // Get the table object to use for adding a row at the end of the table
    var $itemsTable = $('#itemsTable');

    // Create an Array to for the table row. ** Just to make things a bit easier to read.
    var rowTemp = [
        '<tr class="item-row">',
            '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
            '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
            '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
            '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
            '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
        '</tr>'
    ].join('');

    // Add row to list and allow user to use autocomplete to find items.
    $("#addRow").bind('click',function(){

        var $row = $(rowTemp);

        // save reference to inputs within row
        var $itemCode 	        = $row.find('#itemCode');
        var $itemDesc 	        = $row.find('#itemDesc');
        var $itemPrice	        = $row.find('#itemPrice');
        var $itemQty	        = $row.find('#itemQty');

        if ( $('#itemCode:last').val() !== '' ) {

            // apply autocomplete widget to newly created row
            $row.find('#itemCode').autocomplete({
                source: 'data/item-data.php',
                minLength: 1,
                select: function(event, ui) {
                    $itemCode.val(ui.item.itemCode);
                    $itemDesc.val(ui.item.itemDesc);
                    $itemPrice.val(ui.item.itemPrice);

                    // Give focus to the next input field to recieve input from user
                    $itemQty.focus();

                    return false;
                }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                    .appendTo( ul );
            };
            // Add row after the first row in table
            $('.item-row:last', $itemsTable).after($row);
            $($itemCode).focus();

        } // End if last itemCode input is empty
        return false;
    });

    $('#itemCode').focus(function(){
        window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
    });

}); // End DOM

	// Remove row when clicked
	$("#deleteRow").live('click',function(){
		$(this).parents('.item-row').remove();
        // Hide delete Icon if we only have one row in the list.
        if ($(".item-row").length < 2) $("#deleteRow").hide();
	});

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery AutoComplete tutorial using multiple input boxes</title>

    <style type="text/css" title="currentStyle">
                @import "css/layout-styles.css";
                @import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- jQuery libs -->
    <script  type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script  type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

    <!-- Our jQuery Script to make everything work -->
    <script  type="text/javascript" src="js/jq-ac-script.js"></script>

</head>
<body>

<div id="container">

    <div class="panel">
        <div class="title-large">
            <div class="theme"></div>
        </div>
        <div class="content inpad">
            <div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>
            <form action="" id="itemsForm">

                <table id="itemsTable" class="general-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Item Code</th>
                            <th>Item Description</th>
                            <th>Item Qty</th>
                            <th>Item Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row">
                            <td></td>
                            <td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
                            <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc"  readonly="readonly" /></td>
                            <td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
                            <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly /> </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span>sadsada</a>
        </div>     
    </div>
</div>

</body>
</html>

我使用了$（＆＃39;输入＆＃39;）。模糊（function（）示例：jsfiddle此方法但if函数中的条件始终无法实现。有人请帮助我如果你知道的话。谢谢

Answer 1

我无法测试它，但我没有看到任何问题。

   $(document).ready(function(){

        // Use the .autocomplete() method to compile the list based on input from user
        $('#itemCode').autocomplete({
            source: 'data/item-data.php',
            minLength: 1,
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#itemCode').val(ui.item.itemCode);
                        $itemrow.find('#itemDesc').val(ui.item.itemDesc);
                        $itemrow.find('#itemPrice').val(ui.item.itemPrice);

                        // Give focus to the next input field to recieve input from user
                        $('#itemQty').focus();

                return false;
          }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };

        // Get the table object to use for adding a row at the end of the table
        var $itemsTable = $('#itemsTable');

        // Create an Array to for the table row. ** Just to make things a bit easier to read.
        var rowTemp = [
            '<tr class="item-row">',
                '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
                '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
                '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
                '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
                '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
            '</tr>'
        ].join('');

        // Add row to list and allow user to use autocomplete to find items.
        $("#addRow").bind('click',function(){

            var $row = $(rowTemp);



               // save reference to inputs within row
            var $itemCode           = $row.find('#itemCode');
            var $itemDesc           = $row.find('#itemDesc');
            var $itemPrice          = $row.find('#itemPrice');
            var $itemQty            = $row.find('#itemQty');

            if ( $('#itemCode:last').val() !== '' ) {

                // apply autocomplete widget to newly created row
                $row.find('#itemCode').autocomplete({
                    source: 'data/item-data.php',
                    minLength: 1,
                    select: function(event, ui) {
                        $itemCode.val(ui.item.itemCode);
                        $itemDesc.val(ui.item.itemDesc);
                        $itemPrice.val(ui.item.itemPrice);

                        // Give focus to the next input field to recieve input from user
                        $itemQty.focus();

                        return false;
                    }
                }).data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                        .appendTo( ul );
                };
                // Add row after the first row in table
                $('.item-row:last', $itemsTable).after($row);
                $($itemCode).focus();

            } // End if last itemCode input is empty

            $row.find("input[type='text']").on("change", function(evtObj)
            {
                var currentvalue = $(evtObj.target).val();
                var $all = $("#itemsTable").find("input[type='text']");
                $all.each(function(i,obj)
                {
                    if(this.value == currentvalue && !$(this).is(evtObj.target))
                    {
                        alert("oops, duplicate");
                        $(this).css("backgroundColor", "red");
                        return false;
                    }
                });
            });

            return false;
        });

        $('#itemCode').focus(function(){
            window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
        });

    }); // End DOM

      // Remove row when clicked
      $("#deleteRow").live('click',function(){
        $(this).parents('.item-row').remove();
            // Hide delete Icon if we only have one row in the list.
            if ($(".item-row").length < 2) $("#deleteRow").hide();
      });

Answer 2

这是一个有效的准系统版本。 https://jsfiddle.net/bindrid/cwj41grx/19/

     var $itemsTable = $('#itemsTable');

      // Create an Array to for the table row. ** Just to make things a bit easier to read.
      var rowTemp = [
        '<tr class="item-row">',
        '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
        '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
        '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
        '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
        '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
        '</tr>'
      ].join('');


                 $("#itemsTable").on("change", ".tInput", function(evtObj) {

          var currentvalue = $(evtObj.target).val();
          var $all = $("#itemsTable").find(".tInput");
          $all.each(function(i, obj) {
            if (this.value == currentvalue && !$(this).is(evtObj.target)) {
              alert("oops, duplicate");
              $(this).css("backgroundColor", "red");
              return false;
            }
          });
        });


$("#addRow").on('click', function() {
        var $row = $(rowTemp);

        // save reference to inputs within row
        var $itemCode = $row.find('#itemCode');
        var $itemDesc = $row.find('#itemDesc');
        var $itemPrice = $row.find('#itemPrice');
        var $itemQty = $row.find('#itemQty');

        $itemsTable.append($row);
        return false;
      });

这个html

    <div id="container">

      <div class="panel">
        <div class="title-large">
          <div class="theme"></div>
        </div>

        <div class="content inpad">

          <div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>

          <form id="itemsForm" action="">

            <table class="general-table" id="itemsTable">
              <thead>
                <tr>
                  <th></th>
                  <th>Item Code</th>
                  <th>Item Description</th>
                  <th>Item Qty</th>
                  <th>Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr class="item-row">
                  <td></td>
                  <td>
                    <input name="itemCode[]" tabindex="1" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" tabindex="2" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" readonly="readonly" value=""> </td>
                </tr>
                <tr class="item-row">
                  <td>
                    <a id="deleteRow"><img title="Remove Item" alt="Remove Item" src="images/icon-minus.png"></a>
                  </td>
                  <td>
                    <input name="itemCode[]" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" value="">
                  </td>
                </tr>
                <tr class="item-row">
                  <td>
                    <a id="deleteRow"><img title="Remove Item" alt="Remove Item" src="images/icon-minus.png"></a>
                  </td>
                  <td>
                    <input name="itemCode[]" class="tInput ui-autocomplete-input" id="itemCode" role="textbox" aria-haspopup="true" aria-autocomplete="list" value="" autocomplete="off"> </td>
                  <td>
                    <input name="itemDesc[]" class="tInput" id="itemDesc" readonly="readonly" value="">
                  </td>
                  <td>
                    <input name="itemQty[]" class="tInput" id="itemQty" value="">
                  </td>
                  <td>
                    <input name="itemPrice[]" class="tInput" id="itemPrice" value="">
                  </td>
                </tr>
              </tbody>
            </table>



          <a class="button-clean large" id="addRow" href="#"><span> <img title="Add Row" alt="Add" src="images/icon-plus.png"> Add Item</span></a>

        </div>



      </div>
    </div>

如何在第二行文本字段与第一行文本字段具有相同值时警告错误

2 个答案: