问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

想使用AutoComplete，在文本框输入@的时候，自动填充后面的邮箱

头像
月东来
    1354175

    在注册的时候，需要填入邮箱，希望能在用户输入@后能够在文本框下面看见可选择的邮箱，有大神可以指导一下吗

    javascriptjquery
    阅读 2.8k
    3 个回答
    得票最新
    头像
    ars_qu
      1.7k21229
      ✓ 已被采纳
      头像
      uta_li
        205512

        ant design AutoComplete的第二个示例就是啊

        class Complete extends React.Component {
  state = {
    result: [],
  }

  handleSearch = (value) => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
    } else {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
  }

  render() {
    const { result } = this.state;
    const children = result.map((email) => {
      return <Option key={email}>{email}</Option>;
    });
    return (
      <AutoComplete
        style={{ width: 200 }}
        onSearch={this.handleSearch}
        placeholder="input here"
      >
        {children}
      </AutoComplete>
    );
  }
}
        头像
        布列瑟农的星空
          1.4k21127
          <body>
        <div>
            <input type="email" list="mail" id="input">
            <datalist id="mail">
                <option value="@qq.com">@qq.com</option>
                <option value="@baidu.com">@baidu.com</option>
                <option value="@360.com">@360.com</option>
                <option value="@fuckqq.com">@fuckqq.com</option>
            </datalist>
        </div>
    </body>
    <script type="text/javascript">
        $('#input').on('input',function() {
            $('option').each(function(){
                var o = $(this).val();
                var p = $('#input').val().replace(/@\S*$/,'');
                $(this).val(p+o.replace(/\S*(?=@)/,''));
                $(this).text(p+o.replace(/\S*(?=@)/,''))
            })
        })
    </script>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题