add components search

site/templates/layout.html

@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="/static/tomorrow.css">
   <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
+  <script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.2/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
   <script src="/static/script.js"></script>
   <script>
     window.antdVersion = {
@@ -30,8 +31,15 @@
       <img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"> {{ config.site.name }}
     </a>
     <div class="search">
+      <div class="hidden">
+        {%- for item in resource.pages %}
+          {%- if item.meta.category === 'Components' %}
+            <input type="hidden" value="{{item.title}} {{item.meta.chinese}}"/>
+          {%- endif %}
+        {%- endfor %}
+      </div>
       <form>
-        <input type="text" placeholder="search">
+        <input class="search-input" type="text" placeholder="search">
         <button type="submit"></button>
       </form>
     </div>

static/script.js

 $(function() {
+
+  // 获取搜索数据
+  var searchData = [];
+  $('.hidden input').each(function(i, item) {
+    var obj = {};
+    obj.english = item.value.split(' ')[0];
+    obj.chinese = item.value.split(' ')[1];
+    obj.value = item.value.toLowerCase().replace(/\s+/g, "");
+
+    searchData.push(obj);
+  });
+
+  seajs.config({
+    base: 'http://static.alipayobjects.com',
+    alias: {
+      'jquery': 'jquery/1.7.2/jquery',
+      'autocomplete': 'arale-autocomplete/1.4.1/autocomplete'
+    }
+  });
+
+  seajs.use(['jquery', 'autocomplete'], function($, AutoComplete){
+    $(function() {
+      var ac = new AutoComplete({
+        trigger: '.search-input',
+        selectFirst: true,
+        submitOnEnter: false,
+        dataSource: searchData,
+        html: '<strong>{{english}}</strong>&nbsp;<span>{{chinese}}</span>',
+        filter: function(data, query) {
+          var result = [];
+          query = query.toLowerCase().replace(/^\s+|\s+$/g, '');
+          if (!query) return result;
+          $.each(data, function(index, item) {
+            if (new RegExp(query).test(item.value)) {
+              result.push(item);
+            }
+          });
+          return result;
+        }
+      }).render();
+
+      ac.on('itemSelected', function(item) {
+        $(ac.get('trigger')).val('正转到 ' + item.english + ' ' + item.chinese).attr('disabled', 'disabled');
+        location.href = '/components/' + item.english.toLowerCase();
+      });
+    });
+  });
+
   $('.component-demos .icon-all').on('click', function() {
     if ($(this).hasClass('expand')) {
       $(this).removeClass('expand');

static/style.css

@@ -754,6 +754,40 @@ footer ul li > a {
     animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
     -webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
 }
+
+/* autocomplete */
+.ui-select ul {
+  outline: none;
+  position: relative;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 5px #ccc;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+}
+
+.ui-select-item {
+  width: 156px;
+  padding: 10px 12px;
+  clear: both;
+  font-size: 14px;
+  font-weight: normal;
+  color: #666;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ui-select-item-hover {
+  cursor: pointer;
+  background-color: #eaf8fe;
+}
+/* autocomplete end */
+
 @keyframes Load5 {
     0% {
         opacity: 0;