Merge pull request #1075 from ant-design/css-search-box

Css search box

components/select/demo/search-box.md

@@ -0,0 +1,106 @@
+# 搜索框
+
+- order: 9
+
+带有搜索按钮的自动补全输入框。
+
+---
+
+````jsx
+import { Input, Select, Button, Icon } from 'antd';
+import jsonp from 'jsonp';
+import querystring from 'querystring';
+import classNames from 'classnames';
+const Option = Select.Option;
+
+let timeout;
+let currentValue;
+
+function fetch(value, callback) {
+  if (timeout) {
+    clearTimeout(timeout);
+    timeout = null;
+  }
+  currentValue = value;
+
+  function fake() {
+    const str = querystring.encode({
+      code: 'utf-8',
+      q: value,
+    });
+    jsonp(`http://suggest.taobao.com/sug?${str}`, (err, d) => {
+      if (currentValue === value) {
+        const result = d.result;
+        const data = [];
+        result.forEach((r) => {
+          data.push({
+            value: r[0],
+            text: r[0],
+          });
+        });
+        callback(data);
+      }
+    });
+  }
+
+  timeout = setTimeout(fake, 300);
+}
+
+const SearchInput = React.createClass({
+  getInitialState() {
+    return {
+      data: [],
+      value: '',
+      focus: false,
+    };
+  },
+  handleChange(value) {
+    this.setState({ value });
+    fetch(value, (data) => this.setState({ data }));
+  },
+  handleSubmit() {
+    console.log('输入框内容是: ', this.state.value);
+  },
+  handleFocusBlur(e) {
+    this.setState({
+      focus: e.target === document.activeElement,
+    });
+  },
+  render() {
+    const btnCls = classNames({
+      'ant-search-btn': true,
+      'ant-search-btn-noempty': !!this.state.value.trim(),
+    });
+    const searchCls = classNames({
+      'ant-search-input': true,
+      'ant-search-input-focus': this.state.focus,
+    });
+    return (
+      <Input.Group className={searchCls} style={this.props.style}>
+        <Select
+          combobox
+          value={this.state.value}
+          searchPlaceholder={this.props.placeholder}
+          notFoundContent=""
+          defaultActiveFirstOption={false}
+          showArrow={false}
+          filterOption={false}
+          onChange={this.handleChange}
+          onFocus={this.handleFocusBlur}
+          onBlur={this.handleFocusBlur}>
+          {this.state.data.map(d => <Option key={d.value}>{d.text}</Option>)}
+        </Select>
+        <div className="ant-input-group-wrap">
+          <Button className={btnCls} onClick={this.handleSubmit}>
+            <Icon type="search" />
+          </Button>
+        </div>
+      </Input.Group>
+    );
+  },
+});
+
+ReactDOM.render(
+  <SearchInput placeholder="input search text" style={{ width: 200 }} />
+, mountNode);
+````

package.json

@@ -98,6 +98,7 @@
     "instantclick": "^3.1.0",
     "jest-cli": "~0.8.0",
     "json-loader": "^0.5.1",
+    "jsonp": "^0.2.0",
     "less": "~2.6.0",
     "less-loader": "^2.2.0",
     "lesshint-antd": "^1.2.1",
@@ -105,6 +106,7 @@
     "nico-jsx": "~0.8.2",
     "postcss-loader": "^0.8.0",
     "pre-commit": "1.x",
+    "querystring": "^0.2.0",
     "rc-scroll-anim": "^0.1.7",
     "rc-tween-one": "^0.1.8",
     "react": "0.14.x",

scripts/demo.js

@@ -16,6 +16,8 @@ window.ReactDOM = ReactDOM;
 window['object-assign'] = require('object-assign');
 window['classnames'] = require('classnames');
 window['reqwest'] = require('reqwest');
+window['jsonp'] = require('jsonp');
+window['querystring'] = require('querystring');
 window['Values'] = require('values.js');
 window['InstantClick'] = require('instantclick');
 require('./home')();

style/components/form.less

@@ -175,7 +175,7 @@ form {
 }
 
 // Input combined with select
-.@{css-prefix}input-group {
+.@{css-prefix}input-group-wrap {
   .@{select-prefix-cls}-selection {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;

style/components/select.less

@@ -489,3 +489,11 @@
     }
   }
 }
+
+.ant-search-input .@{select-prefix-cls} {
+  width: 100%;
+
+  & + .ant-input-group-wrap > button {
+    top: -5px;
+  }
+}