禁止input输入框显示历史记录（已解决）

需求

html的input 框获取光标后，会提示原来输入过的内容，还会出现下拉的历史记录
有时候项目中完全不需要这个，大家禁止这种情况基本都是在input中加入 autocomplete=“off”

<input type="text" autocomplete="off" />

还有一种办法就是更改ID，像下面这种，就不会有历史记录出现的

<input type="text" id="myinput" class="search-input" placeholder="在这里输入查询关键字" />

如果把ID改成像下面这个样子就会出现历史记录

<input type="text" id="keyword" class="search-input" placeholder="在这里输入查询关键字" />
<input type="text" id="keywords" class="search-input" placeholder="在这里输入查询关键字" />

id=“keyword” 会出现历史记录，id="keywords"会提示“在这里搜索”
也就是说，其实跟id的关键字有关系，如果input输入框没有设置id，就也不会弹出历史记录
如果设置了id，id不是keyword也不会出现，如果id非要设置了keyword那就加个autocomplete="off"禁止。

实现效果：

完整代码：

 <input  ref="codeBox"  v-model="barcode"  v-autofocus type="text" class="lightInput"
       :placeholder="条码编号"  @keyup.enter="toQuery"  @keydown.tab="toQuery"
 />

export default {
  name: "scanPacking",
  directives: {
    // 指令的定义
    autofocus: {
      inserted: function (el) {
        // 获得焦点
        el.focus();
      },
    },
  },
}

样式

<style>
.lightInput {
  border: none;
  width: 98%;
  text-indent: 5px;
  background: #2b2c2c !important;
  height: 30.5px;
  color: #ffffff;
}
.lightInput:focus {
  outline: 0;
  border: 1px solid rgb(0, 112, 70);
}
.lightInput::placeholder {
  color: #ffffff;
  font-size: 12px;
}
input::input-placeholder {
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-webkit-input-placeholder {
  /* //兼容WebKit browsers（Chrome的内核） */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-moz-placeholder {
  /* //Mozilla Firefox 4 to 18 */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-moz-placeholder {
  /* //Mozilla Firefox 19+ */
  color: #ffffff;
  font-size: 12px;
}
.lightInput::-ms-input-placeholder {
  /* //Internet Explorer 10+ */
  color: #ffffff;
  font-size: 12px;
}