java - 这种功能怎么实现？（搜索框自动补全+热词结果统计）

Question

类似这样，输入关键字，然后自动补全，返回相关热词+结果统计，我使用solr的facet功能，但是返回的结果，都是分的很细的词，比如头戴式（2），耳机（10），而不是头戴式耳机（4）。

所以，我想问一下，图中的效果是怎么实现的，后台方面要做哪些设计？

ps：举例是素材来着小米官网

Answer 1

onkeyup イベントをリッスンし、Ajax リクエストをバックグラウンドに送信し、入力されたキーワードをバックグラウンドに渡し、バックグラウンドであいまい一致を実行し、配列をフロントエンドに返します。
ここでは 2 つの点に注意してください。 1 つ目は、バックグラウンドへの頻繁なリクエストを防ぐために、フロントエンドの onkeyup イベントです。2 つ目は、データベースの最適化です。必須であり、検索されたフィールドにはインデックスが付けられている必要があります。ここには多くのことが関係しているため、関連する情報を自分で見つける必要があります。
最後に、フロントエンド効果の実装については、多くの jquery プラグインがあります。 Baidu オートコンプリートを検索すると見つけることができます。以下にいくつか挙げます: http://jq22.com/search?seo=%E8%87%AA%E5%8A%A8%E8%A1%A5%E5% 85%A8

Answer 2

angular は自動的にバインドできます

Answer 3

私の一般的な計画を教えてください
まず、ユーザーが検索した単語をそれぞれ記録し、データベースに保存します (ここでフィルターするか、いくつかの単語を自分でインポートできます)
保存する前に中国語をピンインに変換します。同時に、あいまい検索用に保存されます
スケジュールされたタスクにより、各検索語のインデックス内のレコード数が更新されます (これはリアルタイムではない場合があります)
いくつかの jquery プラグインを使用できます。フロントエンドの -ins (jquery-ui のオートコンプリートなど)
実際の効果は www.cnal.com で確認できます。

Answer 4

jq.autocomplete プラグインがあります。ソース コードを確認して、再度開発できます。

Answer 5

インテリジェントプロンプト機能の実装には、ajax、データベース、jsp/php、アルゴリズムなどの多くの知識が必要です。
データ量が大きい場合、特別な最適化が必要です。
コストはかかりません。小さな機能に多大な労力を費やすのは効果的です
92find.c-o-m の検索ボックス スマート プロンプト機能ホスティング サービスを使用しました。
たった 1 行の JavaScript コードで、Baidu と Taobao の検索ボックス プロンプトのすべての機能を実行できます。実現
例: 漢字のピンイン照合、ピンイン接頭辞の照合、あいまい検索、インテリジェントなフォールト トレランス、プロンプトの単語とそのソートの重み付けもカスタマイズできます
5 分で私の Web サイトに入力プロンプト機能を導入できますBaidu や Taobao と同じくらい強力で使いやすい
IE、Firefox、Safari、Chrome 、Opera のさまざまなブラウザとも互換性があります
iOS、Android、Windows と互換性があります

Answer 6

インテリジェントプロンプト機能の実装には、ajax、データベース、jsp/php、アルゴリズムなどの多くの知識が必要です。
データ量が大きい場合、特別な最適化が必要です。
コストはかかりません。小さな機能に多大な労力を費やすのは効果的です
92find.c-o-m の検索ボックス スマート プロンプト機能ホスティング サービスを使用しました。
たった 1 行の JavaScript コードで、Baidu と Taobao の検索ボックス プロンプトのすべての機能を実行できます。実現
例: 漢字のピンイン照合、ピンイン接頭辞の照合、あいまい検索、インテリジェントなフォールト トレランス、プロンプトの単語とそのソートの重み付けもカスタマイズできます
5 分で私の Web サイトに入力プロンプト機能を導入できますBaidu や Taobao と同じくらい強力で使いやすい
IE、Firefox、Safari、Chrome 、Opera のさまざまなブラウザとも互換性があります
iOS、Android、Windows と互換性があります