简介

简介：输入提醒自动完成插件，相似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”。