根据内容自动提示的输入框

迷南。 2022-12-15 11:23 212阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

代码

import React, { Component } from "react";
    import { AutoComplete } from 'element-react';
    import 'element-theme-default';
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          nation: [
            { "value": "China", "address": "China" },
            { "value": "America", "address": "America" }
          ],
          value1: '',
          value2: ''
        }
      }
      querySearch(queryString, cb) {
        const { nation } = this.state;
        const results = queryString ? nation.filter(this.createFilter(queryString)) : nation;
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    
      createFilter(queryString) {
        return (nation) => {
          return (nation.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      }
    
      handleSelect(item) {
    
      }
    
      render() {
        return (
          <AutoComplete
            placeholder="请输入内容"
            value={this.state.value1}
            onFocus={e => console.log(e, 'onFocus')}
            onBlur={e => console.log(e, 'onblur')}
            fetchSuggestions={this.querySearch.bind(this)}
            onSelect={this.handleSelect.bind(this)}
          ></AutoComplete>
        );
      }
    }
    export default App;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221123/1c74070ce55342bc97bf2360cdc18203.png

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 element根据输入框内容筛选table

<template> <div class="contentpanel-layout"> <div class="contentview-lay...

￡神魔★判官ぃ/ 2024年04月18日 20:11/ 0 赞/ 75 阅读

相关获取焦点后隐藏提示内容的输入框

获取焦点后隐藏提示内容的输入框有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS

た入场券/ 2024年03月31日 15:30/ 0 赞/ 84 阅读

相关 js获取输入框内容

1、给输入框取个id名（用的getElementById）也可以取class、name 2、给提交按钮添加 onclick（鼠标单击时触发事件）指定函数名 3、func

╰+攻爆jí腚メ/ 2024年03月26日 19:58/ 0 赞/ 80 阅读

相关 Elasticsearch根据输入内容给出自动建议和自动补全

自动建议：包括按词项给出建议和按语句给出建议，按词项给出建议包括三种类型：missing 当搜索内容不存在给出建议；popular 建议文档出现的频率比搜索内容高的词；alwa

墨蓝/ 2023年01月15日 03:56/ 0 赞/ 136 阅读

相关根据内容自动提示的输入框

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

迷南。/ 2022年12月15日 11:23/ 0 赞/ 213 阅读

相关隐藏shell提示输入的内容

接收输入：read -p "Please Input the key:" key 不显示输入内容：read -s 升级处理：将输入显示为星号 echo -e

以你之姓@/ 2022年05月22日 09:34/ 0 赞/ 194 阅读

相关关闭input文本输入框的自动提示功能设置方法

文本输入框的自动提示功能在浏览器中模式是打开的。有时候我们并不需要自动提示功能，例如需要用户自己再次输入而非自动完成。在IE中可以使用工具-内容-自动完成选项进行设置。　　

朱雀/ 2022年05月21日 06:47/ 0 赞/ 2754 阅读

相关清除input 输入的自动提示框

在<input type="text" name="" value=""/>时输入内容,input框下自动出现以往输入的提示; 加入autocomplete="off" 属性

爱被打了一巴掌/ 2022年05月14日 14:58/ 0 赞/ 368 阅读

相关 C#提示框自动关闭——根据需求时间自己设置

目录前言一、建类 1.ShowMsg类 2.CloseState类二、调用方法 -------------------- 前言在做机房的时候经

小灰灰/ 2022年01月14日 06:39/ 0 赞/ 249 阅读

相关 h5 输入提示框

输入框提示列表 input的list属性必须和datalist的id属性相同，才能有输入提示框 datalist中的内容将会被隐藏代码示例:

缺乏、安全感/ 2021年07月24日 14:35/ 0 赞/ 492 阅读