搜尋結果呈現

2010-08-20

1231
0

摘要:搜尋結果呈現

如果不考慮資料庫效能、查詢速度…等等後端處理的事情，只思考搜尋結果怎麼在網頁上呈現，有哪些點該注意？

第一個想到的是，不靠 JavaScript也要能運作（我也不知道為什麼先想到這個，好歹之前也是網頁前端程式設計師，居然想把這丟遠遠的）…再加上現在使用 asp.net，一開始做了一堆 submit按鈕…相當沒 sense… 囧rz
使用者可能會把網頁連結複製下來丟給其他人，預期這樣就能看到相同的頁面
相同的搜尋結果可能要有不同的顯示方式（ex：圖片列表、文字列表…）

只想到這樣，那就開始動手吧！

因為第三點，切畫面的時候有把搜尋結果放的地方切乾淨一點。

做到一半，不對勁…哪來這麼多 submit button？怪怪…還想了一陣子才想到用超連結後面夾 querystring的方式來做…第二點根本就是個大提示啊！傻傻的。總之想到了，豁然開朗！但還是太慢了，得打掉一部分程式…

最後弄出來了，熱門關鍵字查詢、建議查詢、分頁，基本功能都能動了。（列這三個功能的時候想到…平常拜大神拜這麼勤，沒事也會想想大神提供某些服務是怎麼做的…怎麼做這個就沒想到去參考一下咧？大神的 UI一直都是很好的範例啊…）

然後，是時候用 ajax增加一點互動性，減少一些頻寬消耗了。

$("#div_id").load("url?query=data #div_id")是好物，asp.net 常常回本頁查詢，這樣寫很簡單的就可以只更新需要更新的部分…不過，雖然不是整頁 submit，回來還是整頁回來，包含肥大的 view state。

這問題只要複寫 Render就解決了，VerifyRenderingInServerForm是因為有些 web控制項限制一定要在<form>標籤裡才能回傳 html，這裡不需要這個限制，蓋掉。

        protected override void Render(HtmlTextWriter writer)
        {
            if (Request.QueryString["control"]!=null)
            {
                Page.FindControl(Request.QueryString["control"]).RenderControl(writer);
                return;
            }

            base.Render(writer);
        }
        public override void VerifyRenderingInServerForm(Control control)
        {
            //base.VerifyRenderingInServerForm(control);
        }

$("#div_id").load("url?query=data&control=div_id")，搞定。

然後問題來了，ajax沒有上一頁……jquery.history是我們的好朋友…直接看 code吧，這裡我卡了一陣子，一開始不是很懂原理 orz

            $.history.init(function(hash) {
                if (hash !== '') {
                    var target = parseSearch(hash, "control", "rightContainer"), query = decodeURIComponent(parseSearch(hash, "q", ""));//parseSearch 是解 key&value格式的小函式

                    $("#SearchText").val(query);
                    $("#lblSearchText").text(query);

                    $("#" + target).load(window.location.pathname + hash);//  IE 6一定要補上window.location.pathname
                }
                else {
                    // 注意不要擋到 postback回來的資料
                    //$("#productListContainer").load(window.location.href + "?control=productListContainer");
                }
            });

            $("#rightContainer").delegate("#main-pager a", "click", function() {// 1.4.2之後才有 delegate
                //$("#main-pager a").live("click", function() {
                if (this.href) {
                    var loadUrl = this.href;// a.href包含所有查詢條件
                    if (loadUrl.indexOf("?") !== -1) {
                        loadUrl = loadUrl.substring(loadUrl.indexOf("?"));
                        loadUrl = loadUrl + "&control=productListContainer" + "&s=" + $("#DisplayType input:checked").val();
                    }

                    //這裡是進化史XD
                    $.history.load(loadUrl);// 這個想了很久才懂，發出 request的動作要移到網址改變的時候，也就是傳進 init的函式
                    //$("#productListContainer").load(this.href + " #productListContainer", {});
                    //$("#productListContainer").load(this.href + "&control=productListContainer&s=" + displayType);
                };
                return false;
            });

一開始沒想到 SEO，這樣做意外的有做到 SEO…XD

感覺還有東西沒想到，以後再補充囧"

回首頁