html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd...

不可以多选，使用tags属性的时候会支持多选，希望能够保存自己输入的内容，

网上找的答案说是用combobox跟tabIndex={0}这两个属性，试了下是不起作用的，我当前用的antd版本是3.15.0的，请问有遇到这问题的吗

回答：

为什么不用AutoComplete?

回答：

真的要使用select组件的话，也可以不用改造组件实现，配合showSearch以及onSearch：

const {searchKeyWordDataType} = this.state;

style={{width: '300px'}}

placeholder="请输入"

showSearch

onSearch={value => this.setDataType(value)}

{

searchKeyWordDataType ?

{searchKeyWordDataType}

: ''

}

int

string

setDataType(value) {

this.setState({

searchKeyWordDataType: value

});

}

回答：

我去看了一下antd 支持，支持输入和筛选的话再多选模式下是支持的，也就是 mode="tag" 的方式是OK的。单选的情形需要您自己实现这个逻辑，用户输入时候如果不存在就提示用户新建即可。

回答：

思路：如果下拉框的数据是固定的，且不需要搜索，那么可以自己写一个组件(输入框 + 下拉框)，输入框覆盖在下拉框上面就行。

代码：

* 支持编辑的下拉框(不可搜索)

* @Author: Eric

* @Date: 2019-01-30 16:09:13

* @Last Modified by: Eric

* @Last Modified time: 2019-04-28 16:08:32

import React from 'react';

import classNames from 'classnames';

import { Select, Input } from 'antd';

class EditableSelect extends React.Component {

鼠标离开输入框后校验是否有值及填充默认值

onBlur = e => {

let value = e.target.value;

let {onChange, onBlur, default:defaultValue} = this.props;

if(value === '' && defaultValue){

onChange && this.props.onChange(defaultValue);

}

onBlur && onBlur(e);

}

render() {

let { children, value, inputValue, disabled=false} = this.props;

return (

{children}

className="ue-editable-select-input"

disabled={disabled}

value={value}

onChange={this.props.onChange}

onBlur={this.onBlur}/>

);

}

export default EditableSelect;

回答：

showSearch 仔细看文档

Select

回答：

…,

html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd...相关推荐

html5培训靠谱吗,html5培训和web前端有靠谱的吗？
html5培训和web前端培训有靠谱的吗? 我是2016年应届毕业生工商管理专业,同年6月7日我这天完全结束了自己的学生时代,经朋友介绍在毕业的第二天,我只身一人来到了兄弟连(www.itxdl.cn ...
html ui 下拉列表,Atitit.ui控件-下拉菜单选择控件的实现select html_html/css_WEB-ITnose...
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& mod ...
python selenium 下拉框选择_【selenium】基于python语言，如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
js考试题 html5新特性,Web前端初级面试题总结
Web前端初级面试题总结发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核 ...
HTML5开发和web前端开发的区别与联系？
HTML5与Web前端什么关系,Web前端有哪些优势?Web前端就业怎么样?现在学习前端就业前景好吗?越来越多人了解Web前端,也有很多年轻人想进入到Web前端的行列,但是现在Web前端还值得大家去选 ...
HTML5网页术语,web前端之HTML5的一些术语和概念
HTML5是html标准的下一个版本,它並沒有完全颠覆後者,依然有很多相似之处,但是也有10个关键不同之处.(从头用html5建站更方便) HTML5与HTML4区别不是特别的大,新增了很多直观的新功 ...
达内html5是什么,Web前端工程师应该知道的HTML5相关知识有哪些
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的HTML5相关知识有哪些?随着互联网技术的快速发展,人们对互联网的使用越来越大,对于界面和用户体验的要求越来越高.因此Web前端越来越火,前端 ...
原生js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. <html lang="en&qu ...
html下拉框 js选中,js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. 自定义select *{ margin: 0; p ...

html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd...

html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入，又可以从下拉中选择? antd...相关推荐

最新文章

热门文章