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"。