質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

4回答

1362閲覧

名前を1文字ずつ入力して絞り込み検索をする”工夫”

kojiroy

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

2クリップ

投稿2018/12/27 11:05

Webシステムでよく見かけるような、「名前を1文字ずつ入力して絞り込み検索をする機能」の作成を考えています。

「りんご」、「みかん」、「にんじん」、「にんにく」とあった場合に、
「に」と入力すると、「にんじん」「にんにく」がサジェストされるようなイメージです。

論理的には実現可能かと思いますが、大量データから検索結果を引き当てる場合は、おそらくデータの持ち方、取り方を工夫する必要があるかと思っています。巷のWebサービスではどのような技術を使っているのでしょうか。

よくあるやり方(と、自分が思っている)
①クライアント側に情報をすべて取得しておいて、<input autocomplete> タグで引き当てる。
→ 大量データ時にはすべての情報を取得すると、メモリが逼迫
②入力されたタイミングでajaxでPOSTして、DBへ検索して結果を取得する
→ つどつどDB通信が走り、性能に懸念あり。

巷のWebサービスではこれらの懸念をどのように払拭しているのでしょうか。

抽象的な質問ですが、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

懸念されている様な理由から、法人向けの専用サービスがいくつも存在する程度にはノウハウが必要な分野ではあります。

ある程度の規模以上であれば1にしても2にしても事前にサジェスト用データを作成しておくことが必要になります。
サジェスト用のデータの作成及び使用は全文検索エンジンによって提供される機能を組み込むことが多い(というか自力で実装するのは大変すぎる)と思います。
参考

①クライアント側に情報をすべて取得しておいて、<input autocomplete> タグで引き当てる。
→ 大量データ時にはすべての情報を取得すると、メモリが逼迫

データ量次第ではありかもしれません。
メモリを圧迫するレベルのデータだと、先にサーバのネットワーク負荷が気になるところだと思います。
実データでは無く、事前に作成されたサジェスト用データにすれば結構何とかなる気もします。

②入力されたタイミングでajaxでPOSTして、DBへ検索して結果を取得する
→ つどつどDB通信が走り、性能に懸念あり。

よく実装されているのはこちらですね。
サジェスト用のオープンソースなJavaScriptライブラリやプラグインは色々あるので、フロント側の実装の参考にしてみると良いと思います。

サーバ側については事前に作成されたデータを全文検索エンジンの機能を使ってサジェスト検索する場合、例えば普通のテーブルからLIKE '%入力文字%'で検索するのとは桁が違う性能が出るので、結構な規模のアクセスまでは耐えられます。(耐えられなくなったらサービスが繁盛しているという事なので、サーバを増強したりサジェスト用サーバを分けたりしましょう)

投稿2018/12/27 11:56

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kojiroy

2018/12/27 14:40

回答ありがとうございます。 全文検索エンジンもオープンソースであるんですね。 参考にさせていただきます。
guest

0

サジェストに利用する情報をあらかじめ限定しておけばDB通信走ったとしてもそこまでの負荷はないと思います。
teratailだとタグのみにするとか、タイトルのみにするとか。
それも「サイト内の情報」を対象にするか「よく使われるキーワード」を対象にするかで作りは違ってきますね。
いずれにしてもajaxでDB問い合わせですが、「入力確定」をトリガーにすれば通信回数は減らせそうに思います。
ローディングサークル出しておいてその間は操作させないように(同期ですねこれ)するとか。

投稿2018/12/27 11:26

編集2018/12/27 11:28
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kojiroy

2018/12/27 14:41

回答ありがとございます。 通信回数がネックになるのであれば、そこを減らす案を考えることと、後はいかにデータを絞れるかですかね。 参考にさせていただきます。
guest

0

ベストアンサー

入力されたタイミングでajaxでPOSTして、DBへ検索して結果を取得する

でよいと思います。
ただ、入力ごとではなく入力された0.1秒後とかなんらかのバッファを取るほうがよいかも

投稿2018/12/27 11:23

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kojiroy

2018/12/27 14:42

回答ありがとうございます。 やはり、調べてみても②のやり方がほとんどですね・・・。 参考にさせていただきます。
guest

0

以前Webの案件で、この機能を実装したことがありますが、質問者様の質問でいうと、①の対応をしました。
(AngularJSだったので記法は違いますが)

その時は担当者などのユーザー名での絞り込み検索でしたので、数が少なく、
画面を開くための事前データ取得の際に、絞り込み検索用のユーザーリストをDBから一括取得してデータを保持しておくという対応をしていました。
そうするといちいちDB検索は走らないので、画面を開く際に少し時間がかかってしまいますが、絞り込みは問題なく行えました。

検索したいデータ量によると思います。

投稿2018/12/28 05:04

編集2018/12/28 05:05
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kojiroy

2018/12/28 11:39

回答ありがとうございます。 >検索したいデータ量によると思います。 これがすべてですね。 適切な方法をとれるようにしたいものです。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問