JqueryUI學習筆記-自動完成autocomplete

時間  2019-11-18
標籤 jqueryui 學習 筆記 自動 完成 autocomplete 欄目 JQuery 简体版
原文   原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style type="text/css">
.ui-autocomplete-category {
 font-weight: bold;
 padding: .2em .4em;
 margin: .8em 0 .2em;
 line-height: 1.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
 //擴展autocomplete組件，重寫autocomplete的_renderMenu方法，將提示條目分類別顯示
 //$.widget接受三個參數，第一個參數是新的組件的名稱，必須以custom.開頭，.後面的纔是新組件的名稱，調用或者初始化方式與autocomplete相同
 //第二個參數是擴展或者重寫的組件，這裏是$.ui.autocomplete，自動完成組件
 //第三個參數是對象，包含了重寫的屬性或者方法，這裏重寫了_renderMenu方法
 $.widget("custom.catcomplete", $.ui.autocomplete, {
  //該方法在渲染下拉列表以前被調用，能夠經過修改此方法達到將選項分類的目的
  //傳入的ul參數是選項的父容器，能夠將選項增長到容器中
  //傳入的items參數是即將顯示的數據列表
  _renderMenu : function(ul, items) {
   var that = this;
   currentCategory = "";
   //遍歷items對象數組，將他們分類，下面的這種方法必須保證同類別的數據放在一塊兒才能夠。
   $.each(items, function(index, item) {
    if (item.category != currentCategory) {
     ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
     currentCategory = item.category;
    }
    that._renderItemData(ul, item);
   });
  }
 });
 //擴展combobox組件，使其能夠支持自動完成功能,重要！！！
 $.widget("custom.combobox", {
  //本人猜想這個方法應該是建立該組件時調用的，實踐證實也是的，即$("#combobox").combobox();這句話
  _create : function() {
   console.log("call _create");
   this.wrapper = "";
  }
 });
</script>
<script type="text/javascript">
 $(function() {
  var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL",
    "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
    "Python", "Ruby", "Scala", "Scheme" ];
  var objects = [ {
   label : "America",
   value : "美國"
  }, {
   label : "China",
   value : "中國"
  }, {
   label : "Japan",
   value : "日本"
  } ];
  var categories = [ {
   label : "anders",
   category : ""
  }, {
   label : "andreas",
   category : ""
  }, {
   label : "antal",
   category : ""
  }, {
   label : "annhhx10",
   category : "Products"
  }, {
   label : "annk K12",
   category : "Products"
  }, {
   label : "annttop C13",
   category : "Products"
  }, {
   label : "anders andersson",
   category : "People"
  }, {
   label : "andreas andersson",
   category : "People"
  }, {
   label : "andreas johnson",
   category : "People"
  } ];
  var autocomplete = $("#tags").autocomplete({
   //設置自動完成輸入框的數據源，能夠是字符串數組，可使對象數組，也能夠是url字符串(返回一個json數據)
   //若是是對象數組，每一個對象能夠有兩個屬性，label和value，label表明顯示的值，value表明選中後填入輸入框的值，數據過濾是過濾label的
   //source : availableTags,//爲何設置成url後就不能根據用戶輸入過濾數據了呢，並且文件中是對象數組沒法自動提示啊
   //自動提示框會根據用戶輸入的字符自動篩選符合條件的字符串，默認篩選規則是整個字符串內容包含用戶輸入的字符即符合條件，能夠修改這個默認行爲
   //source若是設置成function函數，函數有兩個參數，第一個參數能夠獲取用戶輸入的字符，第二個參數是一個函數，調用這個函數而且傳入一個數組便可，數組即前面所說的數組，可是不能是url了，由於調用response函數已經不會幫咱們再次去請求了
   source : function(request, response) {
    console.log($.ui.autocomplete.escapeRegex(request.term));
    //建立一個正則表達式，$.ui.autocomplete.escapeRegex方法說是能夠將字符串中的特殊字符做爲普通字符處理，即若是傳入的是"[]"，處理後返回"\[\]"，其實就是加了轉義字符而已
    //第二個參數"i"表示該正則表達式忽略大小寫比較
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    //$.grep方法能夠看作是一個過濾數組元素的方法，將數組中不符合條件的元素剔除
    //第一個參數是源數組，第二個參數是一個回調函數，參數是數組的每一項，若是方法返回true，該元素會被加到目的數組中，不然被過濾
    response($.grep(availableTags, function(item) {
     return matcher.test(item);
    }));
   },
   //這個配置項不知道是幹嗎的。。。
   appendTo : "body",
   //能夠設置成true或者false
   //若是設置成true，當下拉列表顯示時，自動聚焦到列表第一項
   //若是設置成false，當下拉列表顯示時，將不會自動聚焦，默認爲false
   autoFocus : true,
   //設置下拉列表顯示的延遲時間，單位毫秒，默認值是300
   delay : 100,
   //設置自動完成框的禁用狀態，true表示禁用，false表示啓用
   disabled : false,
   //設置搜索的最小字符數，即輸入至少minLength個字符，纔會去匹配提示，
   //數據比較少的狀況下能夠設置成0，可是若是數據太多，有幾千條，就須要用這個限制來過濾數據了
   minLength : 1,
   //設置下拉列表相對於自動完成輸入框的位置
   position : {
    //設定下拉列表的定位點，即at屬性會以這個點爲參照物，設定下拉列表相對於輸入框的位置
    //第一個值是水平方向，可選left,right,center
    //第二個值是豎直方向，可選left,right,center
    my : "left top",
    //設定相對位置
    at : "left bottom"
   },
   //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
   _renderItem : function(ul, item) {
    alert("_renderItem");
    return $("<li>").attr("data-value", item.value).append($("<a>").text(item.label)).appendTo(ul);
   },
   //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
   _renderMenu : function(ul, items) {
    var that = this;
    $.each(items, function(index, item) {
     that._renderItemData(ul, item);
    });
    $(ul).find("li:odd").addClass("odd");
   },
   //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
   _resizeMenu : function() {
    this.menu.element.outerWidth(500);
   },
   //當文本框內容修改後失去焦點時觸發該事件，也可使用綁定的方式將該事件綁定到提示框上
   //autocomplete.on("autocompletechange",function(event,ui){}); 
   //ui.item表明你選中的那一項的對象，包含label和value屬性，若是沒選中ui.item爲null
   change : function(event, ui) {
    if (ui.item == null) {
     console.log("No Choose");
    } else {
     console.log("Choose" + ui.item.value);
    }
   },
   //當智能提示框關閉後會觸發此事件,ui是空對象
   close : function(event, ui) {
    console.log("close");
   },
   //當自動完成組件建立時回調此方法,ui是空對象
   create : function(event, ui) {
    console.log("create");
   },
   //當提示列表中的某一項獲取焦點時觸發此事件,其中ui.item就是得到焦點的那一項
   //只有使用鍵盤選擇某一項時，纔會更新文本框中的值，使用鼠標不更新文本框的值，可是都會觸發此事件
   focus : function(event, ui) {
    console.log("focus:" + ui.item.value);
   },
   //當提示列表打開後觸發此事件,ui是空的對象
   open : function(event, ui) {
    console.log("open");
   },
   //在search事件觸發以後，列表顯示以前會觸發此事件，其中ui.content是即將顯示在列表中的內容，已經標準化過了，是包含label和value的對象數組
   response : function(event, ui) {
    console.log("content length:" + ui.content.length);
    //在每一個對象的label屬性中增長一個索引，使用$.each()方法遍歷對象數組，第一個參數是數組，第二個參數是回調方法，每遍歷一個對象會回調一次該方法，該方法第一個參數是索引，第二個參數是對象，若是該方法返回false，表示跳出遍歷，若是返回true，繼續下一個對象遍歷。
    $.each(ui.content, function(i, obj) {
     obj.label += i;
     if (i == 5) {
      return false;
     }
    });
   },
   //在minLength知足後，delay以後會首先觸發該事件，具體做用不詳，傳進來的ui是一個空的對象
   search : function(event, ui) {
    console.log("search");
   },
   //當列表中的某一個像被選中後觸發此事件，參數和focus是同樣的
   select : function(event, ui) {
    console.log("select:" + ui.item.value);
    //event.preventDefault();使用這個函數能夠阻止事件的默認行爲，好比選擇某一項的默認行爲就是更新文本框的值，若是調用該方法，則不會更新文本框的值。可是不能阻止列表關閉。
   }
  });
  $("#close").button().click(function() {
   autocomplete.autocomplete("close");//關閉智能提示框
  });
  $("#destroy").button().click(function() {
   autocomplete.autocomplete("destroy");//銷燬智能提示框，輸入框將再也不具備提示功能
  });
  $("#disable").button().click(function() {
   autocomplete.autocomplete("disable");//禁用智能提示框，輸入框將再也不具備提示功能
  });
  $("#enable").button().click(function() {
   autocomplete.autocomplete("enable");//啓用智能提示框，輸入框將再也不具備提示功能
  });
  $("#isDisabled").button().click(function() {
   var isDisabled = autocomplete.autocomplete("option", "disabled");//獲取智能提示是否禁用的狀態
   console.log("isDisabled:" + isDisabled);
  });
  $("#option").button().click(function() {
   var option = autocomplete.autocomplete("option");//獲取智能提示框全部配置信息
   var optionStr = "";
   //遍歷配置信息
   for ( var p in option) {
    optionStr += p + ":" + option[p] + "\n";
   }
   console.log("Option:\n" + optionStr);
  });
  $("#setDelay").button().click(function() {
   autocomplete.autocomplete("option", "delay", 2000);//設置下拉列表延遲時間爲2s
  });
  $("#search").button().click(function() {
   //調用以後會觸發search事件，能夠設置回調方法，實踐證實，不能觸發search事件的回調方法，funk，那這個方法做用是啥啊？
   autocomplete.autocomplete("search", "");
  });
  //建立catcomplete組件
  $("#catcomplete").catcomplete({
   source : categories
  });
  //建立combobox組件
  var combobox = $("#combobox").combobox();
  //遍歷一下combobox對象的屬性和方法
  var optionStr = "";
  for ( var p in combobox) {
   optionStr += p + "\n";
  }
  console.log(optionStr);
 });
</script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">autocomplete: </label> <input id="tags" />
 </div>
 <!--
 <button id="close">關閉智能提示框</button>
 <button id="destroy">銷燬智能提示框</button>
 <button id="disable">禁用智能提示</button>
 <button id="enable">啓用智能提示</button>
 <button id="isDisabled">獲取智能提示是否禁用狀態</button>
 <button id="option">獲取智能提示框全部配置信息</button>
 <button id="setDelay">設置列表延遲時間</button>
 <button id="search">觸發search事件</button>
  -->
 <div class="ui-widget">
  <label for="catcomplete">catcomplete: </label><input id="catcomplete" />
 </div>
 <div class="ui-widget">
  <label>Your preferred programming language: </label> <select id="combobox">
   <option value="">Select one...</option>
   <option value="ActionScript">ActionScript</option>
   <option value="AppleScript">AppleScript</option>
   <option value="Asp">Asp</option>
   <option value="BASIC">BASIC</option>
   <option value="C">C</option>
   <option value="C++">C++</option>
   <option value="Clojure">Clojure</option>
   <option value="COBOL">COBOL</option>
   <option value="ColdFusion">ColdFusion</option>
   <option value="Erlang">Erlang</option>
   <option value="Fortran">Fortran</option>
   <option value="Groovy">Groovy</option>
   <option value="Haskell">Haskell</option>
   <option value="Java">Java</option>
   <option value="JavaScript">JavaScript</option>
   <option value="Lisp">Lisp</option>
   <option value="Perl">Perl</option>
   <option value="PHP">PHP</option>
   <option value="Python">Python</option>
   <option value="Ruby">Ruby</option>
   <option value="Scala">Scala</option>
   <option value="Scheme">Scheme</option>
  </select>
 </div>
 <button id="toggle">Show underlying select</button>
</body>
</html>javascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程