PHPとAjaxを使用した自動補完

13077 ワード
php jquery ajax テキストリンク
オリジナルと詳細なポストは、Autocomplete using PHP and Ajaxで書かれます
前回のチュートリアルでは、uploading an image using AJAX and Javascriptについて学びました.このチュートリアルでは、PHPとAjaxを使用してautocompleteを見ます.
Autocompleteは、Web開発に重要な役割を果たして、我々はユーザーが優れた経験を得ることができるAjaxの助けを借りて.では、まず最初にオートコンプリートを理解しよう.
ユーザーがテキストフィールドで検索する特定の文字をタイプし、システムがページをリフレッシュせずに一致する内容のリストを与えた場合、そのプロセスはautocompleteと呼ばれます.
PHPとAjaxを使用した自動補完の手順(このチュートリアルでは)
  • HTMLフォームを作成する
  • Ajax用のjQueryを使用し、一致する名前
    • のリストを取得します
  • Curlを使用して一致する名前のリストを取得し、リストの形式でユーザーに戻ります.
    • HTMLフォームの作成
    <!DOCTYPE html>
<html>
<body>
    <h2>Demo Example</h2>
    <form action="" method="POST">
        <label for="name">Astronauts:</label><br>
        <input type="text" id="astronauts" name="astronauts">
        <div id="astronauts-list"></div>
        <input type="submit" value="Submit">
    </form>
</body>
</html>
    デモ用の1つのフォームフィールドのみを使用しました.実際の例では、より多くのフィールドがあるかもしれません.ここでは、我々は宇宙飛行士のための1つのテキストフィールドを定義しており、これは一度私たちが結うを開始すると、その名前を提案します.
    一致する名前のリストを取得するには、AjaxのjQueryを使用します
    <script type="text/javascript">
    $(document).ready(function() {
        $("#astronauts").keyup(delay(function(e) {
            $.ajax({
                method: "POST",
                url: "response.php",
                dataType: "json",
                data: {
                    astronaut_name: $(this).val()
                }
            }).done(function(response) {
                $("#astronauts-list").show();
                var lists = '';
                $.each(response, function(key, val) {
                    lists += "<li onclick='highlightSelectedAstronauts(\"" + val + "\")'>" + val + "</li>";
                });
                $("#astronauts-list").html(lists);
            });
        }, 700));
    });
    function highlightSelectedAstronauts(val) {
        $("#astronauts").val(val);
        $("#astronauts-list").hide();
    }
    function delay(callback, ms) {
        var timer = 0;
        return function() {
            var context = this,
                args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                callback.apply(context, args);
            }, ms || 0);
        };
    }
</script>
    完全なJavaScriptコードは、ここにあります.ブロックでブロックしましょう.
    したがって、ドキュメントが読み込まれるとき、我々は我々のフィールド「宇宙飛行士」のためにkeyupイベントを初期化します.このタイプのキーアップイベントがトリガされ、Ajax操作を実行すると、ユーザータイプがいつでも発生します.
    Ajax呼び出しでは、PHPからの応答を一度受け取った後、“LI”のリストの形ですべての一致する宇宙飛行士を表示し、テキストフィールドで宇宙飛行士が選択される任意の名前をクリックします.
    ここで、私たちはまた、数ミリ秒でサーバへのリクエスト(遅延関数を使用する)を遅延させました.何故なら、ユーザは非常に速く名前を入力しており、Ajaxは実際の結果を取得するために時間がかかるサーバーを要求します.
    一致するリストが巨大な場合は、最終的に短いリストよりも長い時間がかかります.それで、解決策はサーバーに負担を降ろすだけでなく、非常に速く反応する数ミリ秒でサーバに要求を遅らせることです.
    カールを使用して一致する名前のリストを取得する
    <?php
$astronaut_name = strtolower($_POST['astronaut_name']);
$cURLConnection = curl_init('http://api.open-notify.org/astros.json');
curl_setopt($cURLConnection, CURLOPT_RETURNTRANSFER, true);
$apiResponse = curl_exec($cURLConnection);
curl_close($cURLConnection);
$list = [];
$list_astros = json_decode($apiResponse, true);
if ($list_astros['message'] == 'success') {
    foreach ($list_astros['people'] as $key => $astronaut) {
        preg_match("/" . $astronaut_name . "/", strtolower($astronaut['name']), $output_array);
        if (!empty($output_array)) {
            array_push($list, $astronaut['name']);
        }
    }
}
echo json_encode($list);
    上記のコードでは、我々は宇宙飛行士のリストを得るためにカールを使用しました.また、データベースからリストを取得することもできます.しかし、デモのために、我々は短いコードのためにカールを保つことができると思います.
    カールリクエストでは、現在ISS(国際宇宙ステーション)にある現在の宇宙飛行士を取得します.そのリストを取得すると、ユーザーが要求したものと一致しているリストのみを収集することから始めることができます.
    次のコードでは、curlを使ってフェッチされた各宇宙飛行士をループし、ユーザがリクエストしたものがどのようなものであっても、それぞれの宇宙飛行士と1つずつマッチさせられ、マッチした場合、別の配列で収集され、次にJSONHER ENCODE ()関数を使用します.
    まとめ
    それが大きなウェブサイトになるとき、ユーザーに最高の経験を与えることは良いアプローチです、しかし、それはウェブサイトが空想でなければならないことを意味しません.ユーザーは特定のリストを必要とするときにいらいらさせてはいけません.
    PHPとAjaxを使用してautocompleteは、ユーザーの時間だけでなく、保存もユーザビリティを向上させます.
    Java Beans
    event