JQuery tokeninput 輸入提示

簡介

簡介：輸入提示自動完成插件，相似google搜索的自動完成的功能，例如，segmentfault撰寫文章、提問時添加標籤的時候下拉框自動的提示。
官網：http://loopj.com/jquery-tokeninput/

使用

• 下載文件

在官網下載tokeninput相關的文件：

將這些文件放入項目中，本人習慣性放入項目的common/plugin/..目錄下。

• 引入
  在html中引入：

<link rel="stylesheet" href="../../../common/plugin/tokeninput/token-input-facebook.css" type="text/css" />
<link rel="stylesheet" href="../../../common/plugin/tokeninput/token-input.css" type="text/css" />
<script type="text/javascript" src="../../../common/plugin/tokeninput/jquery.tokeninput.js"></script>

代碼示例

html代碼

<form id="book-setting-add-form" class="smart-form">
  <dl class="dl-horizontal fullscreen-dl ">
      <dt>學期</dt>
      <dd>
        <section class="col col-8">
         <label class="select">
            <select name="termId" id="add-term">

            </select><i></i>
        </section>
       </dd>
       <dt>課程名稱</dt>
       <dd>                               
        <section class="col col-8">
             <input type="text" name="" id="token-courseId">
             <input type="hidden" name="courseId" id="add-course">
             </section>
        </dd>
        <dt>教材名稱</dt>
        <dd>
         <section class="col col-8">
            <input type="text" name="" id="token-bookId">
            <input type="hidden" name="bookId" id="add-bookId">
          </section>
        </dd>
        </dl>
  </form>

js代碼

//初始化課程名稱
  $("#token-courseId").tokenInput("/server/basic/course/info/list.json",
    {
      theme: "facebook",
      hintText: "請輸入  課程名稱",
      noResultsText: "沒有相關課程",
      searchingText: "搜索中...",
      preventDuplicates: true,
      minChars: 2,
      searchDelay: 500
    });

  //初始化教材名稱
    $("#token-bookId").tokenInput("/server/basic/book/info/list.json",
    {
      theme: "facebook",
      hintText: "請輸入 教材名稱",
      noResultsText: "沒有相關教材",
      searchingText: "搜索中...",
      preventDuplicates: true,
      minChars: 2,
      searchDelay: 500
    });

效果截圖

另，jquery.tokeninput.js中的DEFAULT_SETTINGS設置中，默認是queryParam: "q",能夠根據項目須要設置爲queryParam: "keywords"。