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動態載入的一個方法,詳細的一些屬性方法和事件還是需要到官網去查看一下

 


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

更多相關文章
  • 某位 A 同學發了我一張截圖,問為何結果中出現了負數? 看了圖,我第一感覺就是數據溢出了。數據超出能表示的最大值,就會出現奇奇怪怪的結果。 然後,他繼續發了張圖,內容是 print(100000\ 208378),就是直接列印上圖的 E[0]\ G[0],結果是 20837800000,這是個正確的 ...
  • 因為重裝了系統,重新配置JDK環境變數,過程中遇到一些問題,分享一下。 本文圖片較多,適合新手 -- ( : 工具: Window 10 JDK1.8,官網或百度雲很好找 JDK1.8,官網或百度雲很好找 步驟: 一、安裝 單擊安裝包,進入以下界面: 直接點擊下一步。 直接點擊下一步。 安裝路徑建議 ...
  • 我不打算解釋什麼是 ,也不解釋為什麼要使用它。我希望你已經在其他地方瞭解過,如果沒有,你可以使用 去搜索它。在本文中,我將告訴您如何使用專門針對 和`RxJava`的響應式編程。讓我們開始吧。 1.預備知識 在你繼續閱讀之前,我希望你能理解如何使用 和`RxJava REST API`。 如果不能, ...
  • 上次在 asp.net core 從單機到集群 一文中提到存儲還不支持分散式,並立了一個 flag > 基於 github 或者 開源中國的碼雲實現一個 storage 於是這兩天就來填坑了。。 ...
  • 一、static關鍵字 下麵我設計了一個房貸利率上浮類(用來計算房貸利率上浮多少): 上面例子的問題在於基準利率這個屬性是所有房貸利率上浮對象共用的屬性,而不是每個房貸利率上浮對象都擁有一個基準利率。所以要把基準利率這個屬性設置成共用的需要使用static關鍵字,第二版房貸利率上浮類: 靜態自動屬性 ...
  • 在java的spring中有自動註入功能,使得代碼變得更加簡潔靈活,所以想把這個功能移植到c#中,接下來逐步分析實現過程 1.使用自動註入場景分析 在asp.net mvc中,無論是什麼代碼邏輯分層,最終的表現層為Controller層,所以我們註入點就是在Controller中,這裡我們需要替換默 ...
  • EF 6及以前的版本是預設支持延遲載入(Lazy Loading)的,早期的EF Core中並不支持,必須使用Include方法來支持導航屬性的數據載入。 當然在 EF Core 2.1 及之後版本中已經引入了延遲載入功能,詳細實現原理可以查看官網( "傳送門" )。 下麵記錄一下,分別使用Incl ...
  • 按照目前的軟體開發發展趨勢中,不管是前後端分離還是提供數據服務,WebApi使用的越來越廣泛,而且.NET Core也是我們.NET開發人員未來發展的趨勢,所以說學會使用.NET Core Api是非常有必要的。 本人作為一個.NET菜鳥,正在慢慢的學習中,將學到的一步一步記錄下來。 一、創建項目 ...
一周排行
  • 該方式是直接對屏幕進行截圖操作UserControl chartContainPanel = new UserControl();Graphics graph = chartContainPanel.CreateGraphics();Size s = chartContainPanel.Size;B... ...
  • dotnetcore3.1 WPF 中使用依賴註入 Intro 在 ASP.NET Core 中預設就已經集成了依賴註入,最近把 "DbTool" 遷移到了 WPF dotnetcore 3.1, 在 WPF 中我們也希望能夠使用依賴註入,下麵來介紹一下如何在 WPF dotnetcore3.1 中 ...
  • 原來的C 程式都有Main的,現在用vs新建一個Wpf項目,啟動似乎變成App.xmal,前期項目中為了獲取啟動參數,很是折騰了一番: 1.先是修改App.xaml,添加StartUp事件 2.然後編輯Application_Startup,判斷e.Args數組 總感覺跟又臭又長的裹腳布一樣,不爽。 ...
  • 冒泡排序原理:(升序)通過當前位置數和後一個位置數進行比較 如果當前數比後一個數大 則交換位置, 完成後 比較基數的位置變成下一個數。直到數組末尾,當程式運行完第一遍 最大的數已經排序到最後一個位置了。次數可以減少迴圈數不用管最後一個數 降序排序同理 不過是把比較方式變成判斷當前數是否小於下一個數 ...
  • 一、前言 這方面的資料很多,重覆的寫沒必要,但是最近一直在學習身份驗證和授權相關東東,為了成體系還是寫一篇,主要是從概念上理解identity系統。 參考:https://www.cnblogs.com/r01cn/p/5179506.html 二、概述 幾乎所有系統都包含用戶、角色、許可權、登錄、註 ...
  • 首先我們使用最簡單的模板案例,裡面有一個Counter計數器,你可以在創建模板中找到。 首先需要設置運行調試方式為IIS Express。這意味著,MAC可能不能使用調試。 然後開啟運行而不調試(Ctrl+F5) 按Shift + Alt + D,會出現一個新的頁面。 如果你想用Chrome調試,復 ...
  • 實體映射時,遇到複雜類型,可選擇下述方法處理: NotMapped,跳過映射 在複雜類型上聲明 [Owned],但僅限該複雜類型是全部由簡單值類型組成的 自定義序列化方法 示例: IPInfo使用了owned,對IPEndPoint使用自定義序列化,對VersionInfo使用JSON序列化 @@@... ...
  • .NET Core 3 Web Api Cors fetch 一直 307 Temporary Redirect 繼上一篇 ".net core 3 web api jwt 一直 401" 為添加 所述的坑後, 本次為添加 ,又踩坑了。 自從 .NET Core 2.2 之後,CORS跨域配置代碼發 ...
  • 在前一章已經學習過WPF動畫的第一條規則——每個動畫依賴於一個依賴項屬性。然而,還有另一個限制。為了實現屬性的動態化(換句話說,使用基於時間的方式改變屬性的值),需要有支持相應數據類型的動畫類。例如,Button.Width屬性使用雙精度數據類型。為實現屬性的動態化,需要使用DoubleAnimat ...
  • WPF dotnet core 3.1 基於 `Microsoft.Extensions.Localization` 實現基本的多語言支持 ...
x