java - 这种功能怎么实现?(搜索框自动补全+热词结果统计)
阿神
阿神 2017-04-17 17:42:07
0
6
575

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

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

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

阿神
阿神

闭关修行中......

全員に返信(6)
Ty80

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

いいねを押す +0
左手右手慢动作

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

いいねを押す +0
刘奇

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

いいねを押す +0
黄舟

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

いいねを押す +0
伊谢尔伦

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

いいねを押す +0
刘奇

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート