文本框 / TextBox

在用户输入过程中，TextBox会发送onChange事件，可以监听这个事件来处理用户的输入，包括获取数据、校验数据；

<label class="field-label">我是</label>
<div id="textbox1" class="ui-textbox">
  <input type="text">
</div>
<div id="welcome">你好</div>

require(['moye/TextBox'], function (TextBox) {

  new TextBox({
    main: document.getElementById('textbox1')
  })
  .on('change', function () {
    document.getElementById('welcome').innerText = '你好，' + this.getValue();
  })
  .render();

});

文本框的状态

<div class="form-row">
  <div id="textbox2" class="ui-textbox ui-textbox-disabled">
    <input type="text" value="禁用">
  </div>
  <div id="textbox3" class="ui-textbox ui-textbox-readOnly">
    <input type="text" readonly="true" value="只读">
  </div>
</div>
<div class="form-row">
  <div id="textbox4" class="ui-textbox ui-textbox-valid">
    <input type="text" value="通过校验">
  </div>
  <div id="textbox4" class="ui-textbox ui-textbox-invalid">
    <input type="text" value="未通过校验">
  </div>
</div>

自动推荐
下面这个示例，在用户输入的过程中，从百度加载相关的热门搜索词。

<div id="textbox-autocomplete" class="ui-textbox">
  <input type="text" value="">
</div>

require(['moye/TextBox', 'moye/plugin/TextBoxAutoComplete'], function (TextBox, TextBoxAutoComplete) {

  new TextBox({
    main: document.getElementById('textbox-autocomplete'),
    plugins: [{
      type: 'TextBoxAutoComplete',
      options: {
        datasource: function (query) {
          return $.ajax({
            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1',
            data: {wd: query},
            dataType: 'jsonp',
            jsonp: 'cb'
          })
          .then(
            function (ret) {
              return $.map(ret.s, function (item) {
                return {
                  text: item,
                  value: item
                };
              });
            },
            function () {
              return [];
            }
          );
        },
        // 定制dom
        renderItem: function (data, index) {
          var cls = 'acitem ' + (index % 2 ? 'even' : 'odd');

          return '<div class="' + cls + '">' + data.text + '</div>';
        }
      }
    }]
  })
  .render()
  .on('autocomplete', function (e) {
    var data = e.suggestion;
    var text;

    if ($.isEmptyObject(data)) {
      text = $.trim(this.getValue());
    }
    else {
      text = data.text;
    }

    window.open('https://www.baidu.com/s?wd=' + text);
  });
});