利用HTML5與jQuery技術創建一個簡單的自動表單完成

jjfat 11年前發布 | 45K 次閱讀自動表單網站模板表單 HTML5 jQuery

谷歌快速搜索自帶大量自動完成插件——庫中甚至還有一個附帶的jQuery UI共享選項。然而今天我要尋找一個替代的解決方案。由DevBridge開發的jQuery Autocomplete插件有確切的功能，我覺得非常有吸引力。你在打字的時候，結果將出現在下拉菜單底部，自動突出顯示的詞語。本教程簡單介紹了通過加載JavaScript數組的內容運行這個插件。從后端文件加載Ajax內容或者從數據庫中加載文本內容都是可行的，在本教程中，更容易使用本地數據。查看以下演示，了解這個插件吧。

在線演示——下載源代碼

創建頁面

首先下載jQuery Autocomplete插件，這里使用的是壓縮后的版本，以及最新的jQuery腳本的副本。因為我在JavaScript數組里保留了所有選擇項，于是將自定義腳本移動到了另一個單獨的文件中。

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel="shortcut icon" >
  <link rel="icon" >
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
  <script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>

安裝過程并不難，所有HTML都是通用的，你可以在頁面中執行任何類型的搜索設計，結果都將正常工作。我使用外容器，ID #searchfield，整體格式置于中央。沒有提交按鈕，但結果將自動出現在輸入的動態文字段下方。

<div id="content">
  <h1>World Currencies Autocomplete Search</h1>
  <p>Just start typing and results will be supplied from the JavaScript. Check out <a >jQuery Autocomplete</a> on Github.</a></p>

  <div id="searchfield">
    <form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
  </div><!-- @end #searchfield -->

  <div id="outputbox">
    <p id="outputcontent">Choose a currency and the results will display here.</p>
  </div>
</div><!-- @end #content -->

我們可以通過使用ID #autocomplete定義目標段落，不需要多余的HTML，因為所有的選擇項都將以JS代碼呈現。另外一個有趣的段落是使用ID #outputcontent。在這段里我們可以放置用戶選項。通常情況下，是將用戶重新定向到一個搜索頁面上，或者轉到主頁面本身。

利用CSS

在這里我不贅述細節了，但要注意每個選擇功能項的CSS樣式設計，來搭配主要輸入區域。邊框和內容樣式在Design Shack搜索欄中有詳細描述，可以直接借鑒。每個選項樣式是基于默認代碼的，我已經復制到我的樣式表里了。

.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }

如果你想保持在一個單獨的樣式表，它仍然通過加載就行了。不過我嘗試了對資源進行整合，從而減少瀏覽器發出的HTTP請求。頭兩類是針對整個彈出選擇行，以及每個內部選擇行。你可以把它們的風格改造成任何適合你網站的樣式。伴隨CSS還有精心挑選的元素類，用于突出顯示已經由用戶輸入的文本內容。

#searchfield { display: block; width: 100%; text-align: center; margin-bottom: 35px; }

#searchfield form {
  display: inline-block;
  background: #eeefed;
  padding: 0;
  margin: 0;
  padding: 5px;
  border-radius: 3px;
  margin: 5px 0 0 0;
}
#searchfield form .biginput {
  width: 600px;
  height: 40px;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #aeaeae;
  font-weight:normal;
  font-size: 1.5em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#searchfield form .biginput:focus {
  color: #858585;
}

無論你怎樣設計，搜索區域本身不會有什么不一樣的問題。jQuery Autocomplete插件適合任意寬度的搜索區域，所有選擇項都能以同樣的布局整潔排列呈現出來。我的設計確實占用了大量頁面上的空間，但這個插件能幫助改善修復這個不完美的地方，而我不需要自定義太多內容。

實現自動完成

如果你使用的是后端Ajax調用來獲取數據結果，那么你需要執行自己的搜索功能了。jQuery Autocomplete識別某些可響應數據，例如XML/JSON，然后由PHP, Rails, Python, ASP.NET等返回。因此，通常情況是通過搜索你的數據庫表中的條目，并拉出所有相關站點和它們的網址，然后把列表返回到你的瀏覽器。我用 JavaScript所創建的條目行是世界各地主要貨幣，當你輸入國家或者貨幣名字的時候，你會看到一個選擇項目清單從數組直接拉出。我復制了一小部分內容來演示它是如何完成的。

$(function(){
  var currencies = [
    { value: 'Afghan afghani', data: 'AFN' },
    { value: 'Albanian lek', data: 'ALL' },
    { value: 'Algerian dinar', data: 'DZD' },
    { value: 'European euro', data: 'EUR' },
    { value: 'Angolan kwanza', data: 'AOA' },
    { value: 'East Caribbean dollar', data: 'XCD' },
...
    { value: 'Vietnamese dong', data: 'VND' },
    { value: 'Yemeni rial', data: 'YER' },
    { value: 'Zambian kwacha', data: 'ZMK' },
    { value: 'Zimbabwean dollar', data: 'ZWD' },
  ];

在jQuery運行你自定義功能之前，以下內容還需要完成。我選擇的是保持陣列和自定義函數調用存儲在同一個JS文件中。不過你可以選擇獨立的函數數據，將它們移動到不同的兩個文件。現在自動完成插件只需要少量的默認代碼。我復制了模板以及在線演示，你可以查看我用相同的參數能夠做到哪些。

$('#autocomplete').autocomplete({
  lookup: currencies,
  onSelect: function (suggestion) {
  // some function here
  }
});



// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
  lookup: currencies,
  onSelect: function (suggestion) {
    var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
    $('#outputcontent').html(thehtml);
  }
});

查找參數僅用于本地數據，并且我們的目標是一個數組時。每當用戶選擇一個選項時onSelect將觸發一個新的函數。以下的在線演示中我們簡單的創建一個新的HTML字符串輸出選定的名字和值。請注意，下面的演示只是最基本的例子，你還可以加以擴展。到jQuery Autocomplete documentation上面看看有什么關于其他參數的好點子。我只是略懂皮毛，那些JavaScript開發人員能把函數調用例子放在一起。我想說的是這個插件很好獲得，大家都可以使用，在必要情況下，甚至能使用靜態數據。

在線演示——下載源代碼

后續

我本人非常推薦這個插件，之前我已經使用了幾個不同的解決方案，但都沒有這個插件好用。通過加載頁面結果呈現選項與直接搜索結果兩者之間有很大區別（比如 Google Instant）。在使用這款插件之前，首先要確保你有一個很好的計劃，構建工作性能良好的用戶界面。jQuery Autocomplete插件完全免費的，所有代碼都在MIT license提供出來了。

via 極客標簽

來源：利用HTML5與jQuery技術創建一個簡單的自動表單完成

本文由用戶 jjfat 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/news/view/1624fbc

自動表單網站模板表單 HTML5 jQuery