ホームページ >ウェブフロントエンド >jsチュートリアル >AutoComplete 自動補完_jquery の実装原理について話しましょう

AutoComplete 自動補完_jquery の実装原理について話しましょう

WBOY
WBOYオリジナル
2016-05-16 17:59:371589ブラウズ

1. 簡単な説明
昨日、サポートの同僚は、クライアントが次のような効果を達成できるよう支援しました (自動完了):

image

私は以前、家を探すときに不動産辞書を呼び出してこれを行いました:

image

これは小さな機能ですが、大きな機能でもあります。大きくも小さくもできるからです。
2. Soufun の AutoComplete
たとえば、上で見たように、Soufun の AutoComplete は大きくなりました。このような効果を見たい場合、Soufun は実際に次のことを行います。
1. データベースジョブ。日次の不動産辞書を XML で保存します。たとえば、今日生成された bj_11_04.xml は各都市に対応します。
2. Memcached をビジネス ロジック レイヤーに追加します。ユーザーがアクセスすると、まず Memcached にあるかどうかを判断し、存在する場合はキャッシュに移動し、XML を読み取ってキャッシュに置きます。
3. AJAX 呼び出し
4. ピンイン呼び出し不動産辞書 (やり始めましたが、後で削除しました。理由は不明です)、効果は次のとおりです

image

つまり、この関数は大きくしたり小さくしたりすることができます。規模が大きくなった場合にはサーバーの追加申請が必要となります。したがって、この機能を実行する前に、訪問数を理解する必要があります。


3.コーディング
以下は私が昨日作ったもので、完全に JqueryUI、
ASPX コードに基づいています:

コードをコピー コードは次のとおりです:



🎜>バックエンド コード:




コードをコピー


コードは次のとおりです://````
// ここで結果を取得します
JavaScriptSerializerserializer = new JavaScriptSerializer();
string jsonString =serializer.Serialize(results);
context.Response.Write(jsonString); >

たぶん誰か context.Request.QueryString["term"]; の用語はどこから来たのかと疑問に思うかもしれません。 aspx ではこの用語をまったく確認できません。
任意のブラウザの F12 のネットワークを使用してキャプチャできます:





上記は ASP.NET での実装です。ASP.NET MVC2、MVC3、または MVC4 では、JSONResult



コードをコピー

image コードは次のとおりです:


public JsonResult GetResourceByKeyWord()

{ //ここで searchResult を取得します return Json(searchResult, JsonRequestBehavior.AllowGet) }
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。