Javascript 组件：输入框自动提示

功能

根据输入的内容框请求数据，并将结果显示在下拉列表中。演示 | Github

截图

用法

var suggest = AutoSuggest({
      // 容器的 id 或 class
      container: '.suggest-container',
      // 输入框的 id 或 class 或 jQuery object
      id: 'stock',
      // 输入几个字符的时候触发请求
      minInputLen: 2,
      // 列表一次显示的最大条目数
      row: 10,
      // 请求的地址，{%input%} 是用户输入的字符
      url: 'http://suggest3.sinajs.cn/suggest/?name=info&key={%input%}',
      // 请求的方式，对应 jQuery 的 script 或 json
      dataType: 'script',
      /**
       * 当用户选中一个列表项时进行的操作
       * @param {string} value 用户选定项的值，如果没有指定该值，则同该项显示的内容
       */
      pick: function(value) {
        alert('你选择了' + value);
      },
      /**
       * 获取到数据后对数据进行过滤及格式化处理
       * @param {string} inputValue 用户当前输入的字符串
       * @param {string|json} data 服务器返回的数据
       * @return {array} 处理后的传回组件用于显示的数据。数组中可以为 string 或 json。
       *                 若为 json，display 为显示的值；value 为操作的值。
       */
      processData: function(inputValue, data) {
        if(window.info) {
          var result = [];
          var stock_arry;
          data = window.info.split(';');
          data.forEach(function(stock){
            stock_arr = stock.split(',');
            if(inputValue.match(/\d+/) !== null) {
              match = stock_arr[2];
            } else {
              match = stock_arr[0];
            }
            result.push({
              'display': match.replace(inputValue, '<strong>' + inputValue + '</strong>') + ', ' + stock_arr[4],
              'value': stock_arr[4] + '(' + stock_arr[2] + ')'
            });      
          });
          return result;
        }
      }