请求实现：同From/To子地点+重复搜索项的选中提示功能

Let's tackle your two requirements step by step: preventing identical From/To sub-location selections and blocking duplicate search items from being added to the table. Here's the modified code with both validations fully implemented:

Modified Full Code #

<div class="container" style="padding-top:70px;"> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <h4>Transfer Batch</h4> 
    </div> 
    <div class="panel-body"> 
      <div class="form-group"> 
        <label for="title"></label> 
      </div> 
      <div class="col-md-6" style="margin-top: 20px;"> 
        <label for="title">From Sub-location:</label> 
        <select id="from_sub_location" class="form-control" style="width:350px"> 
          <option value="0">SELECT</option> 
          <option value="1">Reception principale</option> 
          <option value="2">Reception Alle Maternite</option> 
          <option value="3">Reception Alle Pediatriqui</option> 
          <option value="4">Reception immigration</option> 
          <option value="5">Carte de credit</option> 
          <option value="6">2e etage</option> 
        </select> 
      </div> 
      <div class="col-md-6" style="margin-top: 20px;"> 
        <label for="title">To sub-location:</label> 
        <select id="to_sub_location" class="form-control" style="width:350px"> 
          <option value="0">SELECT</option> 
          <option value="1">Reception principale</option> 
          <option value="2">Reception Alle Maternite</option> 
          <option value="3">Reception Alle Pediatriqui</option> 
          <option value="4">Reception immigration</option> 
          <option value="5">Carte de credit</option> 
          <option value="6">2e etage</option> 
        </select> 
      </div> 
      <div class="col-md-3"></div> 
    </div> 
  </div> 
</div> 
<div class="container"> 
  <div class="card"> 
    <div class="col-md-12" style="padding-top: 10px;padding-bottom: 10px;"> 
      <div class="form-group"> 
        <input type="text" id="medicineSearchBar" class="form-control" placeholder="Search..." > 
      </div> 
      <ul class="list-group" id="result"></ul> 
      <ul style="width:100%; max-height:300px; overflow-y: scroll;" id="li-psearch" class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
        <li role="presentation" class="divider-search"></li> 
      </ul> 
    </div> 
  </div> 
</div> 
<div class="container"> 
  <div class="card"> 
    <table id="myclass" class="table table-bordered"> 
      <tr id="mainTable"> 
        <th scope="col">From</th> 
        <th scope="col">To</th> 
        <th scope="col">Reagent Name</th> 
        <th scope="col">Expiry Date</th> 
        <th scope="col">Quantity</th> 
      </tr> 
      <tbody id="results_body"> 
      </tbody> 
    </table> 
    <button type="button" class="btn btn-primary" style="float: right;margin: 4px 2px;">Transfer</button> 
  </div> 
</div> 
@include('includes.foot') 
<meta name="loc" content="{{Session::get('loc')}}"/> 
<script>
// Array to track already added reagent names
let addedReagents = [];

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  prefetch: {
    url: "<?=asset('assets/img/data2.json');?>",
    filter: function (list) {
      return $.map(list, function (country) {
        return {name: country};
      });
    }
  }
});

countries.initialize();

$('#medicineSearchBar').typeahead(null, {
  name: 'countries',
  displayKey: 'name',
  source: countries.ttAdapter()
});

// Helper function to check if From and To sub-locations are identical
function areLocationsSame() {
  const fromVal = $('#from_sub_location').val();
  const toVal = $('#to_sub_location').val();
  return fromVal !== '0' && toVal !== '0' && fromVal === toVal;
}

jQuery('#medicineSearchBar').on('typeahead:selected', function (e, datum) {
  // First validate: prevent same From/To sub-location
  if (areLocationsSame()) {
    alert('Error: From and To sub-locations cannot be the same!');
    return; // Halt further execution
  }

  // Second validate: prevent duplicate reagent selection
  const reagentName = datum['name'];
  if (addedReagents.includes(reagentName)) {
    alert(`Error: "${reagentName}" has already been selected!`);
    return; // Halt adding duplicate row
  }

  // If validations pass, add the row to the table
  $('#results_body').append(`<tr> 
    <td scope="row">${$('#from_sub_location option:selected').text()}</td>
    <td scope="row">${$('#to_sub_location option:selected').text()}</td>
    <td>${reagentName}</td>
    <td>19-05-2018</td>
    <td><input type="text" class="form-control" id="qty"></td>
  </tr>`);

  // Add the reagent to our tracking array
  addedReagents.push(reagentName);
});

// Optional: Warn users immediately when they select identical locations
$('#from_sub_location, #to_sub_location').on('change', function() {
  if (areLocationsSame()) {
    alert('Warning: From and To sub-locations are the same!');
  }
});
</script>

Key Changes Explained #

• Duplicate Reagent Tracking: We added an array addedReagents to keep a record of every reagent already added to the table. When a user selects a reagent, we first check if it exists in this array—if yes, we show an alert and skip adding the row.

• Same Location Validation:

  • Created a helper function areLocationsSame() that checks if both dropdowns have valid, identical selections.
  • We run this check before adding any row, so users get immediate feedback if they try to transfer to the same location.
  • Added an optional change event listener to the dropdowns to warn users right when they select identical locations, instead of waiting until they try to add a reagent.

• Bug Fix: Your original code referenced non-existent #from_location and #to_location elements. I updated those to use the correct #from_sub_location and #to_sub_location IDs to display the selected location names properly in the table.

This implementation covers both of your requirements with clear, user-friendly feedback.

内容的提问来源于stack exchange，提问作者rajesh singh