demo for Chinese IME input

Starting point for creating JSFiddles with React. This uses React with Addons.

by karlovac

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

:const allItems =  ['長瀨純', '日永梨枝子', '高原步美', '鮎川天理', '春日檜', '中川加儂', '小阪千尋', '春日楠', 'abc string', 'test string']

let onComposition = false


class SearchList extends React.Component {
  constructor(){
    super()

    this.state={
      inputValue: '',
      items: allItems
    }
  }

  handleComposition  = (event) => {

    if(event.type === 'compositionend'){
      onComposition = false
      
      //fire change method to update for Chrome v53
      this.handleChange(event)
    
    } else{
      onComposition = true
    }
  }

  handleChange = (event) => {
    const input = event.target.value
    let newItems = allItems
    const oldItems = this.state.items


    if(!onComposition){
        if(input.trim() !== ''){
          newItems  = oldItems.filter(function (value){
              const result = value.indexOf(input)
              return (result === -1)? false : true
          })
        }

        this.setState({
          inputValue: event.target.value,
          items: newItems
        })
    }
  }

  render() {
    const items = this.state.items

    return <div>
      <input type="text" onCompositionStart={this.handleComposition} onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} onChange={this.handleChange} />
      <ul>
        {
          items.map((value, index)=>{
            return <li key={index}>{value}</li>
          })
        }
      </ul>

    </div>
  }
}

ReactDOM.render(
    <SearchList initText={"輸入要搜尋的字串!"}/> , document.getElementById('container'))