framework7 Autocomplete (自動完成) 具體使用

来源:https://www.cnblogs.com/ZbsCc/archive/2019/09/10/11498664.html

官網地址:https://framework7.io/docs/autocomplete.html#autocomplete-parameters 效果圖: <meta charset="UTF-8"><meta name="viewport" content="width=device-width ...


官網地址:https://framework7.io/docs/autocomplete.html#autocomplete-parameters

效果圖:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title></title>

 

//css引用樣式
<link rel="stylesheet" href="../framework7-4.4.10/packages/core/css/framework7.bundle.css">
<link rel="stylesheet" href="../framework7-4.4.10/kitchen-sink/core/css/app.css">
<link rel="apple-touch-icon" href="../framework7-4.4.10/kitchen-sink/img/f7-icon-square.png">

 

//js引用
<script src="../framework7-4.4.10/packages/core/js/framework7.bundle.min.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/routes.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/app.js"></script>
<script src="../framework7-4.4.10/packages/core/components/picker.js"></script>

 

//頁面html

<div class="list no-hairlines-md">
  <div class="block-header">Dropdown With Ajax-Data</div>
  <ul>
    <li class="item-content item-input" onclick="dropdownajax()">
      <div class="item-inner">
        <div class="item-title item-label">Language</div>
        <div class="item-input-wrap">
          <input type="text" placeholder="Language" id="autocomplete-dropdown-ajax" />
        </div>
      </div>
    </li>
  </ul>
</div>

//js

function dropdownajax() {
  var autocompleteDropdownAjax = app.autocomplete.create({
    inputEl: '#autocomplete-dropdown-ajax',//id
    openIn: 'dropdown',//打開方式:page 、 popup 、 dropdown
    preloader: true, //設置為true包括預載入器以自動完成佈局
    /* 如果我們將valueProperty設置為“id”,那麼select上的輸入值將根據該屬性設置 */
    valueProperty: 'name', //匹配項對象的鍵的名稱,表示項值
    textProperty: 'name', //匹配項目對象的鍵的名稱,表示項目顯示值,用作顯示選項的標題
    limit: 20, //限制每個查詢的自動完成中顯示的最大項目數
    typeahead: true,//預輸入----(啟用類型提前,將匹配中的第一項預填充輸入值)
    dropdownPlaceholderText: 'Try "JavaScript"',//滑鼠放上去的提示信息
    source: function (query, render) {//query為輸入信息,reader用來綁定數據到備選列
      var autocomplete = this;
      var results = [];
      if (query.length === 0) {
        render(results);//如果沒有值,顯示備選列表為空
        return;
      }
      autocomplete.preloaderShow();// 顯示預警器(後邊轉圈圈的圖標)

      //Ajax請求自動完成數據嗎
      app.request({
        url: 'json/autocomplete-languages.json',
        method: 'GET',//目前個人使用的時候,type和method是都可以的
        dataType: 'json',
        data: {
          query: query,//發送“query”到伺服器。在動態生成響應時非常有用
        },
        success: function (data) {
          for (var i = 0; i < data.first.length; i++) {
            if (data.first[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data.first[i]);// 找到匹配項
          }
          autocomplete.preloaderHide();// 關閉預警器(後邊轉圈圈的圖標)
          render(results);//通過傳遞帶有結果項的數組來呈現項(顯示)
        }
      });
    }
  });
  autocompleteDropdownAjax.open();//在主頁面寫此段js,一定要open()
}

//json文件:

{
  "first": [
    {
      "name": "Apple"
    },
    {
      "name": "Aapple"
    },
    {
      "name": "Apricot"
    },
    {
      "name": "Avocado"
    },
    {
      "name": "Banana"
    },
    {
      "name": "Melon"
    },
    {
      "name": "Orange"
    },
    {
      "name": "Peach"
    },
    {
      "name": "Pear"
    },
    {
      "name": "Pineapple"
  }
]
}

註意事項與上一篇文章中寫到的是一樣的,如需使用,請參考上一篇文章的css引用和js引用以及註意事項

這裡只是簡單的組合了一套,能夠使用ajax動態載入的一個方法,詳細的一些屬性方法和事件還是需要到官網去查看一下

 


您的分享是我們最大的動力!

更多相關文章
  • Http請求資源的過程可以看成一個管道:“Pipe”,並不是所有的請求都是合法的、安全的,其於功能、性能或安全方面的考慮,通常需要在這管道中裝配一些處理程式來篩選和加工這些請求。這些處理程式就是中間件。 中間件之間的調用順序就是添加中間件組件的順序,調用順序以於應用程式的安全性、性能、和功能至關重要 ...
  • 前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制項,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kwwwvagaa/net_winform_custom_contr ...
  • 背景:臨時提供一個簡單的網頁,供其他人瀏覽資料庫(Oracel、MSSQL)的某些數據,並導出Excel。 ...
  • 依賴註入主要是一種結構性的模式,註重的是類與類之間的結構,它要達到的目的就是設計原則中最少知道和合成復用的原則,減少內部依賴,履行單一職責,最終就是強解耦。依賴註入目前最好的實現就是依賴註入容器。 Unity是微軟Patterns & Practices團隊所開發的一個輕量級的,並且可擴展的依賴註入 ...
  • 場景 DevExpress的PanelControl常用進行窗體頁面的佈局。 一般是拖拽一個PannelControl,然後是再拖拽其他控制項。 如果是由代碼生成控制項並控制佈局的話,怎樣實現。 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 比如說要在PanelContrl中 ...
一周排行
  • 首先給大家介紹一下序列化是用來乾什麼的,他為什麼出現 序列化這種技術說到底其實就是把臨時數據保存在電腦上。大家都知道對於程式而言對象是一種稍縱即逝的數據,不僅僅是程式重啟、電腦重啟,就連內部函數的變化也有可能導致對象的消失,但是總有一些對象是大家不想讓其隨意消失的並且想在下一次開啟程式的時候進行載入 ...
  • 一、前言 在.Net Framework框架有專門獲取webconfig配置的方法供我們使用,但是在.Net Core或者.Net Standard中沒有可以直接使用的方法來獲取配置文件信息,下麵就來實現獲取配置信息。 二、獲取配置信息的實現 在.Net Core中,他的配置信息的載體是一個json ...
  • 你一定看過這篇文章 《進擊的 Java ,雲原生時代的蛻變》, 本篇文章的靈感來自於這篇文章。北京時間9.24 就將正式發佈.NET Core 3.0, 所以寫下這篇文章讓大家全面認識.NET Core。.NET 生態系統是一個不斷變化的生態圈,我相信它正在朝著一個偉大的方向發展。正好 最近 Inf... ...
  • 參考文檔:Dapper one to many Table C Code pulic List GetPersons(){ var sql = @"SELECT 1 AS Id, 'Daniel Dennett' AS Name, 1942 AS Born, 1 AS CountryId, 'Uni ...
  • 非標設備多相機流水線模式緩存圖片(C/S客戶端,c 開發語言) ​ 本文所說流水線方式下存儲圖像是在軟體測量周期慢於圖片周期前提下講解的,如果軟體一直在等待圖片數據,邏輯就沒有那麼複雜。 1、非標設備項目,常規模式測量流程 常規模式下,相機採集圖像信號由上位機控制(無論軟觸發、硬觸發)。每個周期內的 ...
  • 簡單創建.NET Core WebApi:https://www.cnblogs.com/yanbigfeg/p/9197375.html 登陸驗證四種方式:https://www.cnblogs.com/zuowj/p/5123943.html 解決跨域的8種方法:https://blog.csd ...
  • 最近有個需求就是網頁表格裡面的數據導出到excel 於是從各位前輩的博客園搜了搜demo 大部分非為兩類 都是用的插件NPOI和Eppluse ,因此在這裡就介紹Eppluse 用法,還有就是在博客的時候 好多有留言說想看從資料庫裡面的數據進行導入 而不是寫死的,所以我就以我的案例給大家分享下用法( ...
  • 表達式樹練習實踐:C 值類型、引用類型、泛型、集合、調用函數 [TOC] 一,定義變數 C 表達式樹中,定義一個變數,使用 。 創建變數結點的方法有兩種, 兩種方式都是生成 類型 和 都具有兩個重載。他們創建一個 ParameterExpression節點,該節點可用於標識表達式樹中的參數或變數。 ...
  • 就像是.NET Framework WebApi與.NET Core WebApi一樣,.NET Framework MVC與.NET Core MVC的區別,也是框架的之間的區別。本系列先首先從.NET Framework MVC介紹,後面再去介紹.NET Core MVC 狹義MVC: MVC是 ...
  • 緩存的實現 我們不是做第三方比如Redis等的緩存實現,而是根據實際情況,基於C#上做一些環境變數的保存,方便項目使用。 1、系統全局變數 很多時候,在系統運行開始,需要對系統的運行參數進行保存,以便供全局使用。 代碼如下: 這裡使用一個靜態變數的Dictionary來進行保存,所有項目均可以直接獲 ...
x