JQuery tokeninput 输入提示

时飞发布于2019-08-19 18:05 / 743人阅读

摘要：简介简介输入提示自动完成插件，类似搜索的自动完成的功能，例如，撰写文章提问时添加标签的时候下拉框自动的提示。官网使用下载文件在官网下载相关的文件将这些文件放入项目中，本人习惯性放入项目的目录下。

简介

简介：输入提示自动完成插件，类似google搜索的自动完成的功能，例如，segmentfault撰写文章、提问时添加标签的时候下拉框自动的提示。
官网：http://loopj.com/jquery-tokeninput/

使用

下载文件

在官网下载tokeninput相关的文件：

将这些文件放入项目中，本人习惯性放入项目的common/plugin/..目录下。

引入
在html中引入：

代码示例 html代码

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

云服务器服务器托管提示输入框 python提示输入输入框提示文字 email输入提示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79175.html

JQuery tokeninput输入提示插件获取JSON数据

摘要：上一篇输入提示接着上一篇的功能，继续，还是那个。修改插件源码后，再次初始化设置和，代码如下请输入课程名称没有相关信息搜索中然后获取到了和的值，效果如下图所示上一篇：JQuery tokeninput 输入提示 https://segmentfault.com/a/11... 接着上一篇的功能，继续，还是那个html、js。获取tokeninput中的数据，官网方法如下： Metho...

LeexMuller 2019-08-19 18:06 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0
jquery+php实现用户输入搜索内容时自动提示

摘要：客户端完整代码实现用户输入搜索内容时自动提示搜索服务器端完整代码关闭原文来自今天突然想给本站做个搜索页面，这样用户可以通过搜索来找到自己喜欢的内容，也避免了在海量信息中手动查找资源的麻烦，我的目标和百度首页的效果类似，当用户输入要搜索的文字时，我们在下方给出相关的十条信息，如果用户要找的就是这十条信息内的某一条，那么简单，直接点击就可在新页面中打开页面，主要就是想更人性化一点，让用户...

DevYK 2019-07-01 14:12 评论0 收藏0