elementui组件el-autocomplete 联想搜索

短命女 2022-10-26 14:23 388阅读 0赞

`autocomplete` 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 `querySearch(queryString, cb)，`在该方法中你可以在你的输入建议数据准备好时通过 `cb(data)` 返回到 `autocomplete` 组件中。

使用之前建议参考官方文档  
[input根据输入内容提供对应的输入建议https://element.eleme.cn/\#/zh-CN/component/input][input_https_element.eleme.cn_zh-CN_component_input]

### 使用组件遇到的问题 ###

*  输入建议回调的数据结构
 *  增加回车触发事件
 *  规则校验不生效
 *  表单只有一个input，回车事件时需要禁止默认提交表单

# 输入建议回调的数据结构 #

//官网使用列子
    <el-autocomplete
     class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <script>
      export default {
        data() {
          return {
            restaurants: [],
            state1: '',
          };
        },
        methods: {
          querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
          createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          loadAll() {
            return [
            //
              { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
              { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
              { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" }
            ];
          },
          handleSelect(item) {
            console.log(item);
          }
        },
        mounted() {
          this.restaurants = this.loadAll();
        }
      }
    </script>

*  问题：获取到后端返回的数组，并将数组传入作为 `results` 传入 `callback` 后，焦点放在 输入框 上的时候，并未出现任何内容，只出现了一个不完整的空白框。
 *  原因：默认绑定`data:[] 中的 value` 字段。
 *  解决办法：（看了好多方法，其实这里不需要很麻烦的转换数据结构）官网提供了`属性value-key`，赋值成你需要的字段即可。  
    ![在这里插入图片描述][20210202204129450.jpg_pic_center]

//我这里需要的字段名称为companyName
    <el-autocomplete
       class="inline-input"
       v-model="searchForm.searchCompany"
       :fetch-suggestions="querySearch"
       placeholder="请输入企业关键字"
       @select="handleSelect"
       value-key="companyName"
       @keydown.native.enter="companyPolicyHandel"
     ></el-autocomplete>

# 增加回车触发事件 #

*  问题：`@keydown.enter`事件触发不了
 *  原因：element-ui自身封装了一层`input标签`之后，把原来的事件隐藏了，加上`.native`可以监听到组件根元素的原生事件
 *  解决方法：使用`@keydown.native.enter`

# 规则校验不生效 #

![在这里插入图片描述][20210202210002399.png_pic_center]

一开始触发条件使用了blur,改成change就好了，具体原因正在考察中。

searchRule: {
     searchCompany: [
         {required: true, message: '企业不能为空', trigger: 'change'}
       ],
     },

# 表单只有一个input，回车事件时需要禁止默认提交表单 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

*  问题：表单只有一个input，回车默认提交表单。导致第一次回车就会刷新页面，再次回车，才出发回车事件。
 *  解决：当一个 form 元素中只有一个输入框时，在该输入框中按下回车会提交该表单。如果希望阻止这一默认行为，可以在标签上添加 `@submit.native.prevent。`或者为表单元素增加属性 `onSubmit="return false"。`

其他问题遇到继续补充。

[input_https_element.eleme.cn_zh-CN_component_input]: https://element.eleme.cn/#/zh-CN/component/input
[20210202204129450.jpg_pic_center]: /images/20221024/bb35f07e647b46aeafadaeb2564c55ef.png
[20210202210002399.png_pic_center]: /images/20221024/c9d27e6da6ba440298188c342ccd2f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/d1103e47a8cb4c49b5802e73a85ea6e5.png