autocomplete.js 輸入框，自動提示
百度 酷狗,反正使用搜索功能時,都會看到類似於圖一這種自動補全的功能,灰常的方便,今天做一個專案,剛好要加這個功能,於是一通百度之後,總算做出來,原始碼在文章末尾會提供下載。還有,我這個是參考了網上的一篇文章寫出來的,比較簡單,可以先看一下這個網址:jquery.autocomplete.js的簡單用法,這個基本看完都會的了,會了的話,就不必看下去了.
圖一
如果上面的連結掛了打不開的話,可以接著往下看.
準備工作:
1、要下載一個jquery.autocomplete.js(網上多得很,可以自己上網上下載),下載完以後,把它引到需要使用自動補全功能的頁面當中.
2、它是基於jquery的,隨便引入一個jquey.js檔案即可,這棵大白菜我就不提供了.
做完上面兩步之後,可以正式開始了.
1.新建一個頁面 AutoComplete.aspx,然後在<head></head>標籤中加入如下程式碼(其中txtUserName為需增加自動補分功能的textbox控制元件ID,而AutoComplete.ashx為後臺ajax呼叫的處理頁面):
<script type="text/javascript"> $(function() { $("#txtUserName").autocomplete("Ajax/AutoComplete.ashx"); //由ashx取得資料 }); </script>
2.這樣,上面的頁面就會在每次輸入了文字後自動把輪入框的內容以get的方式傳至AutoComplete.ashx頁面進行處理,具體的請求URL為:Ajax/AutoComplete.ashx?q=[你所入的內容];這是預設的方式,而且只能傳一個值,當你需要傳其它值時,上面的寫法就不能滿足你的需要了.多引數的可以這樣子寫(我原文複製了過來,只看紅色的就可以了,其它的可以自己發揮).
<script type="text/javascript"> $(document).ready(function() { $("#<%=txtUserName.ClientID %>").autocomplete("Ajax/AutoComplete.ashx", { width: 155, selectFirst: true, autoFill: true, minChars: 0, scroll: true, mustMatch: true, extraParams: { a: "1", b: "2", c: "3"} //此處實際請求的URL為"Ajax/AutoComplete.ashx?q='[你在txtUserName中輸入的值]'&a=1&b=2&c=3" //BUG ---begin //此處報錯,灰常的無語,日後有時間再驗證. //formatItem: function (row, i, max) { // return "<td align='left'>{0}</td><td align='right'>{1}</td>".format(row[0], row[1]); //} //BUG ---end } ); }); String.prototype.format = function() { //String 格式化 var arg = arguments; return this.replace(/\{(\d+)\}/g, function(i, m) { return arg[m]; }); } </script>
像上面這樣子,就能夠傳其它值了,你可以用$("#[ID]").val()來選取你需要的控制元件的值.這樣子,基本上的需求都足夠了.
3.使用者介面做完了以後,在資料庫中新增一張表格,隨你的便,可以參考下圖(表名為:test):
圖二
4.表建完以後,新建一個後臺處理的頁面:AutoComplete.ashx ,我直接把完整的程式碼片斷貼出來好了,老規矩,看紅字.
<%@ WebHandler Language="C#" class="AutoComplete" %> using System; using System.Web; using System.Data; public class AutoComplete : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //這是新建的時候預設就在的,好像是指定Response的什麼型別之類的,不管它. GetAutoComplete(context); //呼叫方法 } private void GetAutoComplete(HttpContext context) { OraDbHelper helper = new OraDbHelper(); //例項化資料操作類 string a = context.Request.QueryString["a"].ToString(); string b = context.Request.QueryString["b"].ToString(); string c = context.Request.QueryString["c"].ToString(); string q = context.Request.QueryString["q"].ToString(); string sql = "Select * From test Where userName like '" + q + "%'"; DataSet ds = helper.getDS(sql); int i, j; j = ds.Tables[0].Rows.Count; for (i = 0; i < j; i++) { DataRow dr = ds.Tables[0].Rows[i]; context.Response.Write(string.Format("{0}\n", dr["userName"])); //這個就是我們輸入文字後,介面自動帶出來的選擇列表資訊,你可以綁資料庫,也可以自定義 } } //下面這些是系統自帶的,不用理也不能刪掉它們,否則報錯. public bool IsReusable { get { return false; } } }
5.好了,做完這一步之後,直接按F5看一下頁面的效果吧,如圖三,那些下自動補全的CSS樣式可以自己修改(路徑:css/jquery.autocomplete.css),檔案網上面也有,我這個是公司裡面改好的,看起來還不錯,我直接用了.呵呵.
圖三
6.資源下載(資料庫我就不上傳了,記得修改一下SqlConnectionString這個鳥就可以了,隨便新建個數據庫,新增一張表,這個木有問題吧...)