JQuery tokeninput 輸入提示

時飛發布于2019-08-19 18:05 / 841人閱讀

摘要：簡介簡介輸入提示自動完成插件，類似搜索的自動完成的功能，例如，撰寫文章提問時添加標簽的時候下拉框自動的提示。官網使用下載文件在官網下載相關的文件將這些文件放入項目中，本人習慣性放入項目的目錄下。

簡介

簡介：輸入提示自動完成插件，類似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"。

云服務器 GPU云服務器提示輸入框 python提示輸入輸入框提示文字 email輸入提示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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