javascript - 如何将两个搜索代码合并为一个

Question

我有两个输入字段，每个字段都有下拉菜单。我正在做的是单击下拉菜单，我在其中有一个输入字段，它正在搜索该字段。

因此，对于要搜索的两个下拉菜单，我必须为此编写单独的搜索代码。我想要实现的是:

1. 我只想编写一个搜索代码来搜索所有下拉列表
2. 只是我想尽量减少我的代码

代码片段

$.ajax({ //this one is to populate categorycode dropdwon

  url: 'CategoryCode',
  method: 'GET',
  success: function(categoryCodeData) {
    let dropdown = $('#itemCodeDropdown');
    dropdown.empty();
    dropdown.append('<input type="text" class="form-control" id="categorySearch" placeholder="search">');
    $.each(categoryCodeData, function(key, entry) {
      dropdown.append($('<a class="dropdown-item"></a>').attr('value', entry.name).text(entry.code).click(function() {
        $(this).closest(".input-group").find("input").val($(this).text())
      }))

    });

  },
  'error': function(err) {}
})
$.ajax({
  url: 'myurl',
  method: 'GET',
  success: function(itemCodeData) {
    let dropdown = $('#itemCodeDropdown');
    dropdown.empty();
    dropdown.append('<input type="text" class="form-control" id="itemSearch" placeholder="search">');
    $.each(itemCodeData, function(key, entry) {
      dropdown.append($('<a class="dropdown-item"></a>').attr('value', entry.name).text(entry.code).click(function() {
        $(this).closest(".input-group").find("input").val($(this).text())
      }))

    });

  },
  'error': function(err) {}
})

$("#itemCodeSearch").on("keyup", function() { //this is the search code i am writing for item code i have to write for category code also but with minimization of code
      var value = $(this).val().toLowerCase();
      $("#itemCodeDropdown a").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="itemCode">Item Code</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button" id="itemCodeInput">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" id="itemCodeDropdown"></div>
        </div>
      </div>
    </div>

    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="brandCode">Category Code</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button" id="brandCodeInput">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" id="categoryCodeDropdown">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

我写了一段代码来搜索 item-code ，我在我的代码片段中写了那行代码。

现在要搜索类别代码，我必须为此编写一个新代码所以我想尽量减少我的代码，这样我就可以只写一个搜索代码，它根据我定义的 id 适用于所有下拉菜单

注意 在我的真实代码中，我有超过 10 个输入字段，这里我只使用了 2 个下拉菜单

itemCodeData

[{"code":"1234","name":"banana"},{"code":"6962","name":"rice"},{"code":"5965","name":"icecream"},{"code":"5678","name":"cake"},{"code":"5678","name":"apple"},{"code":"9635","name":"grapes"}]

类别代码数据

[{"code":"C001","name":"Beverages"},{"code":"C002","name":"Juices"},{"code":"C003","name":"Cookies"},{"code":"C004","name":"Breads"},{"code":"C005","name":"Biscuits"},{"code":"C006","name":"Savouries"}]

Answer 1

您可以将输入作为条目添加到包含 ($dropdown, dropdownId, dropdownData) 元组的数组中，然后对其进行循环:

// Add as many entries as you wish in this array
[
  ['#itemCodeDropdown', 'itemCodeSearch', 'itemUrl'],
  ['#categoryCodeDropdown', 'categorySearch', 'categoryUrl'],
].forEach(([selector, searchId, endpointUrl]) => {
  // ...
}

使用虚拟端点 URL 的演示:

[
  ['#itemCodeDropdown', 'itemCodeSearch', 'https://jsonplaceholder.typicode.com/posts'],
  ['#categoryCodeDropdown', 'categorySearch', 'https://jsonplaceholder.typicode.com/albums'],
].forEach(([selector, searchId, endpointUrl]) => {
  $.ajax({
    url: endpointUrl,
    method: 'GET',
    success: function(data) {
      const dropdown = $(selector);
      dropdown.empty();
      dropdown.append('<input type="text" class="form-control" id="' + searchId + '" placeholder="search">');
      
      $.each(data, function(key, entry) {
        dropdown.append($('<a class="dropdown-item"></a>').attr('value', entry.id).text(entry.title).on('click', function() {
          $(this).closest('.input-group').find('input').val($(this).text())
        }));
      });

      $('#' + searchId).on('keyup', function() {
        const value = $(this).val().toLowerCase();
        $(selector + ' a').filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    },
    'error': function(err) {}
  })
});

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="itemCode">Item Code</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button" id="itemCodeInput">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" id="itemCodeDropdown"></div>
        </div>
      </div>
    </div>

    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="brandCode">Category Code</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button" id="brandCodeInput">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
          <div class="dropdown-menu dropdown-menu-right" id="categoryCodeDropdown">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>