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 文件我如何提醒消息

标签： javascriptjquery

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>

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

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