Wie Fehler aufmerksam zu machen, wenn die zweite Zeile Textfeld denselben Wert mit erster Zeile Textfeld

Question

Dies ist jQuery Autocomplete mit mehreren Eingängen in derselben Tabelle hat. Wenn ich 1000 im Einzelteil-Code vorwähle, hilft es mir, Artikelbeschreibung, Einzelteilpreis automatisch zu vervollständigen.

Wenn ich jedoch ein zweites Element hinzufüge, kann der Benutzer den gleichen Code eingeben wie zuvor. Wie kann ich einen Fehler melden, wenn der Benutzer den gleichen Artikelcode mit dem vorherigen Artikelcode eingibt.

Ich habe eine Menge Methode versucht, kann aber immer noch nicht funktionieren. Wer weiß, bitte helfen Sie mir. Danke! Unten ist der Quellcode.

$(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; 
 
\t  } 
 
    // 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 \t   = $row.find('#itemCode'); 
 
     var $itemDesc \t   = $row.find('#itemDesc'); 
 
     var $itemPrice \t   = $row.find('#itemPrice'); 
 
     var $itemQty \t   = $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 
 

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

<!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>

<?php 
/* Database setup information */ 
$dbhost = 'localhost'; // Database Host 
$dbuser = 'root';  // Database Username 
$dbpass = '';   // Database Password 
$dbname = 'itemsdb';  // Database Name 

/* Connect to the database and select database */ 
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error()); 
mysql_select_db($dbname); 


$return_arr = array(); 
$param = $_GET["term"]; 

$fetch = mysql_query("SELECT * FROM items WHERE itemCode REGEXP '^$param' LIMIT 5"); 

/* Retrieve and store in array the results of the query.*/ 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { 

    $row_array['itemCode']   = $row['itemCode']; 
    $row_array['itemDesc']   = $row['itemDesc']; 
    $row_array['itemPrice']   = $row['itemPrice']; 

    array_push($return_arr, $row_array); 
} 

/* Free connection resources. */ 
mysql_close($conn); 

/* Toss back results as json encoded array. */ 
echo json_encode($return_arr); 

I $ haben mit ('Input') verschwimmen (function() Beispiel:.. jsfiddle diese Methode aber die Bedingung, wenn die Funktion kann nicht immer erreichen Jeder bitte helfen Sie mir, wenn Sie es wissen. Dank

Answer 1

Dies ist eine Barebone-Version, die funktioniert. 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; 
     }); 

für diesen 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> 

Answer 2

ich habe keine Möglichkeit, es zu testen, aber ich sehe keine Probleme mit diesem.

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