实现输入后实现匹配输入建议

    
        <el-form-item label="故障现象" prop="symptoms">
          <el-autocomplete
          class="inline-input"
          v-model="form.symptoms"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          placeholder="请输入内容"
          @select="handleSelect"
        >
      </el-autocomplete>
      </el-form-item>
 data() {
    return { 
       //下拉数据
      searchcuslist: [],
      }
  methods: {
   querySearch(queryString, cb) {
        var restaurants = this.searchcuslist;
        console.log(this.searchcuslist);
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          console.log(restaurant.value.symptoms);
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

    handleSelect(item) {
      // Do something when an item is selected
      console.log('Selected item:', item);
    },
  }

  /** 查询任务维修列表 */
    getList() {
      this.loading = true;
      listBusStopMaintenance(this.queryParams).then(response => {
        this.busStopMaintenanceList = response.rows;
        for (let i = 0; i < this.busStopMaintenanceList.length; i++) {
          this.searchcuslist.push({'value': this.busStopMaintenanceList[i].symptoms}) // 必须是这种格式
        }
        this.total = response.total;
        this.loading = false;
      });  
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Delphi 实现联想输入的方法如下: 1. 在设计窗口中添加一个 TEdit 组件和一个 TListBox 组件,将 TListBox 组件的 Visible 属性设置为 False。 2. 在 TEdit 的 OnChange 事件中编写代码,用于根据用户输入的内容从数据库或其他数据源中检索相关的建议,并将结果显示在 TListBox 组件中。例如: ```delphi procedure TForm1.Edit1Change(Sender: TObject); var Suggestions: TStringList; i: Integer; begin Suggestions := TStringList.Create; try // 从数据源中检索与用户输入匹配建议 RetrieveSuggestions(Edit1.Text, Suggestions); // 将建议添加到 ListBox 组件中 ListBox1.Items.Clear; for i := 0 to Suggestions.Count - 1 do ListBox1.Items.Add(Suggestions[i]); // 如果有建议,显示 ListBox 组件 ListBox1.Visible := ListBox1.Items.Count > 0; finally Suggestions.Free; end; end; ``` 3. 在 TEdit 的 OnKeyDown 事件中编写代码,用于响应用户的键盘输入,并根据用户的选择更新 TEdit 中的文本。例如: ```delphi procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState); begin // 如果 ListBox 组件可见,响应用户的键盘输入 if ListBox1.Visible then begin case Key of VK_UP: begin // 用户按 Up 键,将 ListBox 中的选项向上滚动 ListBox1.ItemIndex := ListBox1.ItemIndex - 1; Key := 0; end; VK_DOWN: begin // 用户按 Down 键,将 ListBox 中的选项向下滚动 ListBox1.ItemIndex := ListBox1.ItemIndex + 1; Key := 0; end; VK_RETURN: begin // 用户按 Enter 键,将 ListBox 中的选中项更新到 Edit 中 if ListBox1.ItemIndex >= 0 then begin Edit1.Text := ListBox1.Items[ListBox1.ItemIndex]; Edit1.SelStart := Length(Edit1.Text); Edit1.SelLength := 0; end; ListBox1.Visible := False; Key := 0; end; VK_ESCAPE: begin // 用户按 Esc 键,隐藏 ListBox 组件 ListBox1.Visible := False; Key := 0; end; end; end; end; ``` 通过以上步骤,就可以实现 Delphi 中的联想输入功能。需要根据实际情况调整代码,并实现 RetrieveSuggestions 函数,用于从数据源中检索建议
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值