閱讀(2.8k) 書簽贊(0) 我要糾錯

jQuery Autocomplete

2018-09-26 12:52 更新

jQuery Autocomplete

jQuery Autocomplete 插件根據(jù)用戶輸入值進(jìn)行搜索和過濾，讓用戶快速找到并從預(yù)設(shè)值列表中選擇。通過給 Autocomplete 字段焦點(diǎn)或者在其中輸入字符，插件開始搜索匹配的條目并顯示供選擇的值的列表。通過輸入更多的字符，用戶可以過濾列表以獲得更好的匹配。

該插件現(xiàn)在是 jQuery UI 的一部分，獨(dú)立的版本不會再更新了。目前版本是 1.6。

訪問 jQuery Autocomplete 官網(wǎng)，下載 jQuery Autocomplete 插件。

如需了解更多有關(guān) Autocomplete 的細(xì)節(jié)，請查看 API 文檔自動完成部件（Autocomplete Widget）。

實(shí)例演示

jQuery Autocomplete 插件演示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Autocomplete 插件</title>
<script type="text/javascript" src="http://jquery.bassistance.de/autocomplete/lib/jquery.js" rel="external nofollow" ></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js'></script>
<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/demo/localdata.js'></script>
<link rel="stylesheet" type="text/css"  rel="external nofollow" target="_blank"  />
<link rel="stylesheet" type="text/css"  rel="external nofollow" target="_blank"  />
<link rel="stylesheet" type="text/css"  rel="external nofollow" target="_blank"  />
  
<script type="text/javascript">
$().ready(function() {

   function log(event, data, formatted) {
        $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    }
 
  function formatItem(row) {
        return row[0] + " (<strong>id: " + row[1] + "</strong>)";
 }
 function formatResult(row) {
      return row[0].replace(/(<.+?>)/gi, '');
   }
 
  $("#suggest1").focus().autocomplete(cities);
    $("#month").autocomplete(months, {
      minChars: 0,
      max: 12,
      autoFill: true,
       mustMatch: true,
      matchContains: false,
     scrollHeight: 220,
        formatItem: function(data, i, total) {
            // 不在值列表中顯示當(dāng)前月份（無論何種原因）
           if ( data[0] == months[new Date().getMonth()] ) 
              return false;
         return data[0];
       }
 });
   $("#suggest13").autocomplete(emails, {
      minChars: 0,
      width: 310,
       matchContains: "word",
      autoFill: false,
      formatItem: function(row, i, max) {
           return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
     },
        formatMatch: function(row, i, max) {
          return row.name + " " + row.to;
     },
        formatResult: function(row) {
         return row.to;
        }
 });
   $("#singleBirdRemote").autocomplete("search.php", {
       width: 260,
       selectFirst: false
    });
   $("#suggest14").autocomplete(cities, {
      matchContains: true,
      minChars: 0
   });
   $("#suggest3").autocomplete(cities, {
       multiple: true,
       mustMatch: true,
      autoFill: true
    });
   $("#suggest4").autocomplete('search.php', {
       width: 300,
       multiple: true,
       matchContains: true,
      formatItem: formatItem,
       formatResult: formatResult
    });
   $("#imageSearch").autocomplete("images.php", {
        width: 320,
       max: 4,
       highlight: false,
     scroll: true,
     scrollHeight: 300,
        formatItem: function(data, i, n, value) {
         return "<img src='images/" + value + "'/> " + value.split(".")[0];
      },
        formatResult: function(data, value) {
         return value.split(".")[0];
     }
 });
   $("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
        width: 320,
       max: 4,
       highlight: false,
     multiple: true,
       multipleSeparator: " ",
     scroll: true,
     scrollHeight: 300
 });
   
  
  $(":text, textarea").result(log).next().click(function() {
      $(this).prev().search();
  });
   $("#singleBirdRemote").result(function(event, data, formatted) {
        if (data)
         $(this).parent().next().find("input").val(data[1]);
 });
   $("#suggest4").result(function(event, data, formatted) {
        var hidden = $(this).parent().next().find(">:input");
        hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
  });
    $("#suggest15").autocomplete(cities, { scroll: true } );
   $("#scrollChange").click(changeScrollHeight);
   
  $("#thickboxEmail").autocomplete(emails, {
      minChars: 0,
      width: 310,
       matchContains: true,
      highlightItem: false,
     formatItem: function(row, i, max, term) {
         return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
        },
        formatResult: function(row) {
         return row.to;
        }
 });
   
  $("#clear").click(function() {
      $(":input").unautocomplete();
   });
});

function changeOptions(){
 var max = parseInt(window.prompt('請輸入要顯示項(xiàng)的數(shù)目：', jQuery.Autocompleter.defaults.max));
    if (max > 0) {
     $("#suggest1").setOptions({
         max: max
      });
   }
}

function changeScrollHeight() {
    var h = parseInt(window.prompt('請輸入新的滾動高度（以像素為單位的數(shù)字）：', jQuery.Autocompleter.defaults.scrollHeight));
    if(h > 0) {
        $("#suggest1").setOptions({
           scrollHeight: h
       });
    }
}

function changeToMonths(){
   $("#suggest1")
      // 清除已有的數(shù)據(jù)
        .val("")
        // 改變本地?cái)?shù)據(jù)為月份
      .setOptions({data: months})
       // 獲取 label 標(biāo)簽
        .prev()
       // 更新 label 標(biāo)簽
        .text("月份（本地）：");
}
</script>
   
</head>

<body>

<h1 id="banner">jQuery Autocomplete 插件演示</h1>

<div id="content">
  
  <form autocomplete="off">
     <p>
         <label>單個城市（本地）：</label>
          <input type="text" id="suggest1" />
         <input type="button" value="獲取值" />
         <input type="button" value="改變最大項(xiàng)" onclick="changeOptions();" />
          <input type="button" value="改為月份數(shù)據(jù)" onclick="changeToMonths();" />
            <input type="button" value="改變滾動高度" id="scrollChange" />
      </p>
        <p>
         <label>月份（本地）：</label>
            <input type="text" id="month" />
            <input type="button" value="獲取值" />
         （當(dāng)前月份已從列表中排除）
     </p>
        <p>
         <label>E-Mail（本地）：</label>
            <input type="text" id="suggest13" />
            <input type="button" value="獲取值" />
     </p>
        <p>
         <label>單只鳥（遠(yuǎn)程）：</label>
           <input type="text" id="singleBirdRemote" />
         <input type="button" value="獲取值" />
     </p>
        <p>
         <label>隱藏輸入</label>
           <input />
       </p>
        <p>
         <label>單個城市（包含）：</label>
          <input type="text" id="suggest14" />
            <input type="button" value="獲取值" />
     </p>
        <p>
         <label>多個城市（本地）：</label>
          <textarea id='suggest3' cols='40' rows='3'></textarea>
          <input type="button" value="獲取值" />
     </p>
        <p>
         <label>多只鳥（遠(yuǎn)程）：</label>
           <textarea id='suggest4'></textarea>
         <input type="button" value="獲取值" />
     </p>
        <p>
         <label>隱藏輸入</label>
           <textarea></textarea>
     </p>
    <p>
         <label>圖像搜索（遠(yuǎn)程）：</label>
          <input type="text" id='imageSearch' />
          <input type="button" value="獲取值" />
     </p>
    <p>
         <label>標(biāo)簽（本地）：</label>
            <input type="text" id='tags' />
         <input type="button" value="獲取值" />
     </p>
        <p>
         <label>一些下拉選項(xiàng)（&lt;3 IE）：</label>
          <select>
                <option value="">Item 12334455</option>
             <option value="2">Item 2</option>
               <option value="3">Item 3</option>
               <option value="4">Item 4</option>
           </select>
       </p>
        
      <input type="submit" value="提交" />
  </form>
 
  <p>
     <a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">點(diǎn)擊這里查看一個 ThickBox 窗口內(nèi)的 Autocomplete..</a>（即使超出范圍插件也會正常工作）
 </p>      
  
  <div id="modalWindow" style="display: none;">
                <p>
                        <label>E-Mail（本地）：</label>
                        <input type="text" id="thickboxEmail" />
                        <input type="button" value="獲取值" />
                </p>
     </div>
      
  <button id="clear">移除所有的 Autocomplete</button>
  
  <a  rel="external nofollow" target="_blank" >PHP 腳本用于遠(yuǎn)程的 Autocomplete</a>
   
  <h3>結(jié)果：</h3> <ol id="result"></ol>

</div>

</body>
</html>

以上內(nèi)容是否對您有幫助：

寫筆記

我要補(bǔ)充

jQuery Autocomplete

jQuery Autocomplete

實(shí)例演示

推薦文章

推薦教程

推薦課程