javascript - 如果我使用 jQuery 或 javascript 在一个搜索栏中输入同一个词两次，请提醒我一条消息

Question

这是 HTMl 文件:

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

这是 javascript 文件:

var from_json_file = ["Genouillère renforcée ($30)", "Genouillère Small ($20)", "Genouillères XXL ($20)", "Knee brace long type ($50)", "Nexcare First aid Cold pack ($25)", "Orthèse de stabilisation ($55)", "Orthopaedic back rest long ($125)", "Paire Semelle orthopodéque ($280)", "Prothèse pour immobilisation ($90)", "Sac de sable de 500g ($25)", "Slip orthopédique ($70)"];
const search_box = document.getElementById('medicineSearchBar');
search_box.addEventListener('keyup', function() {
  if (from_json_file.includes(search_box.value)) {
    alert('same');
  }
})

如果我使用 jQuery 或 javascript 在一个搜索栏中输入同一个词两次，请提醒我一条消息如果我在搜索中第二次输入或搜索相同的名称，它应该提醒我一条消息
我搜索那个名字 seconf 时间然后提醒我但不是第一次
我正在为它使用 json 文件我怎样才能提醒消息

Answer 1

您可以将已经搜索过的词存储在某种数据结构中，然后在每次提交时询问它是否已经存储。我在下面的代码中使用了 set。

如果您尝试两次提交同一个词，将显示警告。

const inp = document.querySelector('input');
const btn = document.querySelector('button');
const used = new Set();

btn.addEventListener('click', event => {
  if (!used.has(inp.value)) {
    used.add(inp.value);
  } else {
    alert('this word has already been queried');
  }
});

<input type=text />
<button>submit</button>

如果您只想为被搜索两次的单词触发警报 and 存储在您的 from_json_file 中，那么您可以添加另一个 if else 语句 到上面的代码来检查。

Array.prototype.includes 会告诉您该值是否在您的数组中。

const inp = document.querySelector('input');
const btn = document.querySelector('button');
const used = new Set();
const from_json_file = ["Genouillère renforcée ($30)", "Genouillère Small ($20)", "Genouillères XXL ($20)", "Knee brace long type ($50)", "Nexcare First aid Cold pack ($25)", "Orthèse de stabilisation ($55)", "Orthopaedic back rest long ($125)", "Paire Semelle orthopodéque ($280)", "Prothèse pour immobilisation ($90)", "Sac de sable de 500g ($25)", "Slip orthopédique ($70)"];

btn.addEventListener('click', event => {
  if (!used.has(inp.value)) {
    used.add(inp.value);
  } else if (from_json_file.includes(inp.value)) {
    alert('this word has already been queried');
  }
});

<input type=text />
<button>submit</button>

稍微修改一下，这样只有相关的词才会存储在 set 中(不存储任何不在 from_json_file 数组中的内容)，你可以像这样更改 eventListener 中的回调。

btn.addEventListener('click', event => {
  if (from_json_file.includes(inp.value)) {
    if (!used.has(inp.value)) {
      used.add(inp.value);
    } else {
      alert('this word has already been queried');
    }
  }
});

更新: input 事件而不是按钮 click 事件

const inp = document.querySelector('input');
const used = new Set();
const from_json_file = ["Genouillère renforcée ($30)", "Genouillère Small ($20)", "Genouillères XXL ($20)", "Knee brace long type ($50)", "Nexcare First aid Cold pack ($25)", "Orthèse de stabilisation ($55)", "Orthopaedic back rest long ($125)", "Paire Semelle orthopodéque ($280)", "Prothèse pour immobilisation ($90)", "Sac de sable de 500g ($25)", "Slip orthopédique ($70)"];

inp.addEventListener('input', event => {
  if (from_json_file.includes(inp.value)) {
    if (!used.has(inp.value)) {
      used.add(inp.value);
    } else {
      alert('this word has already been queried');
    }
  }
});

<input type=text />