autocomplete DB大量データ表示処理速度改善したい

Question

DBからデータを取得し、取得したデータをautocompleteにて抽出しています。
データが約10000レコードあるため、表示に時間がかかり実用的ではありません。
何か改善策はありますでしょうか。

ご教示お願い致します。

<form action='#' name='form_head' method='post'>
<table id='den_tbl'>
<thead><tr><th>品目コード／商品名／型式</th><th>数量</th><th>単価</th></thead>
<tbody>
<tr>
<td>
<input name='h_name[]' type='search' class='name' autocomplete='on' placeholder='ｘｘｘ' list='name_list' value = '".$h_name[$i]."' />
<datalist id='name_list'>
　	/***データベースから10000レコード取得***/
	$sql="select s_code,s_name,s_kata from master where s_kubun = '1' order by s_kata desc ";
	$result=mysql_query($sql);
	while($row=mysql_fetch_array($result)){
　	　　　 　$code_get = $row['s_code'];
		echo "<option value=".$code_get.">";
	}
</datalist>
</td>

/*省略*/

</form>

Comments

[K_3578]

ソースコードはMarkDownの<code>ブロック内に貼り付けてください。

```言語名(HTML,CSS等)
ソースコード
```
上記のようにしてみてください。

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください
あと/tbodyの直後に/formがきていてhtml構文的にまずいところもおるのでなおされたほうが良いです。
formが正しく要素を認識しない要因になりえます

[test1234]

失礼いたしました。マークダウンにて掲示いたしました。

[tabuu]

>データが約10000レコードあるため、表示に時間がかかり実用的ではありません。

どこがボトルネックでしょうか？
・DBアクセス？
・サーバのHTML出力？
・ブラウザのHTML描画？

[test1234]

DBアクセス、html出力です

[K_3578]

>javascriptの知識がないため
今から勉強しよう。コピペで動くコード切り貼りしても何の意味も無い

Answer 1

listをアクセス時ではなく入力時に非同期で取得して作る
一定文字数以上入力したら発火するようにする

とか。

Comments

[test1234]

「一定文字数以上入力したら発火するようにする」が理想です。HTMLでも可能でしょうか。

[m.ts10806]

htmlだけでは無理です。
Javascriptで制御してください

[test1234]

申し訳ありません、javascriptの知識がないため、可能でしたらご教示頂きたいです。

[m.ts10806]

一個ずつ調べてやってみてください。

1。入力したときにイベント発生
2。イベント内で入力内容取得
3。入力内容の文字数カウント
4。決めた文字数未満なら処理しない
5。決めた文字数以上なら非同期通信で入力内容送信
6。送信した入力内容をそのまま返して受けとって出力確認
7。送信された入力内容で検索
8。検索結果をjsonなどで返却し出力確認
9。返却されたデータを整形してlist出力

機能的には「サジェスチョン」と呼ばれるものになります。

[退会済みユーザー]

「php js ajax サジェスチョン」でググると、解説記事がいっぱい見つかるよ

[m.ts10806]

autocompleteに囚われすぎても良くないですね。機能を使うために作るわけじゃないですし。

[test1234]

jqueryサジェスチョンを用いることで解決しました。phpのバージョンが古く、json_encodeが適用されませんでしたが、下記参考にさせて頂き、解決できました。ありがとうございました。
https://ninnin.in/system/php/php-low-varsion-not-json_encode-function/

[m.ts10806]

いずれも公式マニュアルを参照してください。どこかの誰が書いた記事は基本嘘だと思ってください。
参照するにしても最低でも1、2年以内にアップデートされたものを。

Answer 2

参考にさせていただきます。

Comments

[m.ts10806]

この投稿は「回答」でもなく「解決」にもなっていません。

[K_3578]

これを回答とは思えませんがコメントと間違えたんでしょうかね

[test1234]

失礼しました。間違えて書き込んでしまいました。

[m.ts10806]

ひとまず「受付中」に戻し、当投稿を削除依頼しておいてください