AutoComplete的使用方法

時間 2019-11-19

標籤 autocomplete 使用方法简体版

原文原文鏈接

百度酷狗,反正使用搜索功能時,都會看到相似於圖一這種自動補全的功能,灰常的方便,今天作一個項目,恰好要加這個功能,因而一通百度以後,總算作出來,源代碼在文章末尾會提供下載。還有,我這個是參考了網上的一篇文章寫出來的,比較簡單,能夠先看一下這個網址:jquery.autocomplete.js的簡單用法,這個基本看完都會的了,會了的話,就沒必要看下去了.javascript

圖一css

若是上面的連接掛了打不開的話,能夠接着往下看. html

準備工做:java

一、要下載一個jquery.autocomplete.js(網上多得很,能夠本身上網上下載),下載完之後,把它引到須要使用自動補全功能的頁面當中.jquery

二、它是基於jquery的,隨便引入一個jquey.js文件便可,這棵大白菜我就不提供了.web

作完上面兩步以後,能夠正式開始了.ajax

1.新建一個頁面 AutoComplete.aspx,而後在<head></head>標籤中加入以下代碼(其中txtUserName爲需增長自動補分功能的textbox控件ID,而AutoComplete.ashx爲後臺ajax調用的處理頁面):sql

<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()來選取你須要的控件的值.這樣子,基本上的需求都足夠了.this

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;
        }
    }

}