html Twitter Bootstrap Typeahead自动完成示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Twitter Bootstrap Typeahead自动完成示例相关的知识,希望对你有一定的参考价值。

Requirements
-----------

* bootstrap with typeahead
* jquery

Explanation
-----------

This will use bootstrap with typeahead to create an autocomplete search. 
It shouldn't search until user is done their thought.  Aka - fast typers.  Right now set to 300ms.

Also caches content from server so you don't make the same call over and over again. 
$(document).ready(function(){
  // use this hash to cache search results
  window.query_cache = {};
  $('#search-input').typeahead({
      source:function(query,process){
          // if in cache use cached value, if don't wanto use cache remove this if statement
          if(query_cache[query]){
              process(query_cache[query]);
              return;
          }
          if( typeof searching != "undefined") {
              clearTimeout(searching);
              process([]);
          }
          searching = setTimeout(function() {
              return $.getJSON(
                  "search.json",
                  { q:query },
                  function(data){
                      // save result to cache, remove next line if you don't want to use cache
                      query_cache[query] = data;
                      // only search if stop typing for 300ms aka fast typers
                      return process(data);
                  }
              );
          }, 300); // 300 ms
      }
  });
});
Search <input type="text" name="query" id="search-input"/>

以上是关于html Twitter Bootstrap Typeahead自动完成示例的主要内容,如果未能解决你的问题,请参考以下文章

html Twitter Bootstrap Typeahead自动完成示例

e107 Bootstrap CMS(内容管理系统)v2,带有PHP、MySQL、HTML5、jQuery和Twitter Bootstrap。问题讨论室:https://gitter.im/e107

Twitter Bootstrap 弹出框内的 HTML

我可以在 twitter-bootstrap popover 数据内容中使用 html 标签吗?

有没有人收到使用 Twitter Bootstrap 的 HTML 电子邮件?

Twitter Bootstrap html 标签如何工作?