Element UI input输入框实现模糊查询-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI input输入框实现模糊查询。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Element UI的input输入框进行搜索的时候（根据输入内容提供对应的输入建议）有个坑，它只能用第一个字进行搜索，不能够实现模糊匹配，下面的方法就是填这个坑。

原来搜“奖”，后台给返回数据，但是不会出现下拉框。

例如：

element ui input模糊搜索,Element UI,前端,javascript

只要搜“抽”才出现下拉框

element ui input模糊搜索,Element UI,前端,javascript

解决后实现效果：

element ui input模糊搜索,Element UI,前端,javascript

代码如下：

    <el-row class="demo-autocomplete">
                <el-col :span="12">
                  <el-autocomplete
                    class="inline-input"
                    v-model="name"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect"
                    @input="changeData"
                  ></el-autocomplete>
                </el-col>
     </el-row>

<script>
export default {
  data() {
    return {
      name:"",//藏品名称
      restaurants: [],
    }
  },

  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      cb(results);

    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
      };
    },
    //@select 点击选中建议项时触发
    handleSelect(item) {
      this.name=item.value
      this.select=item.value
      this.getnumber()
    },
    //@input 在 Input 值改变时触发
    changeData(value){
      if(value!=''){
        this.handleChange()
      }else {
        this.image = ''
        this.select=""
      }
    },
    // 接口
    async handleChange() {
      let param={
        type:"collection",
        name:this.name
      };
      await this.$api.operateMgmt
        .synthesisWorks(param)
        .then((res) => {
          if (res.code == 200) {
            this.restaurants=res.data.map(item=>{
              return{
                value:item.title
              }
            })
            this.image=res.data[0].image
            this.worksId=res.data[0].id
          } else {
            this.$message({
              message: res.message,
              type: "error",
              duration: this.common.duration,
            });
          }
        });
    },
}
</script>

重点：

createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
      };
    },
//这里大于-1可以实现模糊查询，如果你要搜“奖”，就会搜到含“奖”的所有字

如果使用Element UI里面的文章来源地址https://www.toymoban.com/news/detail-533568.html

      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
//这里等于0只能搜“奖”开头的字

到了这里，关于Element UI input输入框实现模糊查询的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！