0

このコードに問題があります。ajax を使用してユーザーに自動提案を行う検索ボックスに関するものです。コードをテストしていますが、機能していないようです。何か提案はありますか?

HTML コード :- 

<input class="autosuggest" name="autosuggest" type="text"></input>

そして JavaScript コード:-

    $(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var search_term = $(this).attr('value');
        $.post('search.php', {search_term:search_term}, function(data){
            alert(data);
        });
    });
 });

今PHPページ： -

    <?php
require_once "database/db.php";

if(isset($_POST['search_term']) == true && empty($_POST['search_term']) == false){
    echo"something";
    }
}

?>

このコードは、値が「something」のアラート ボックスを表示するはずですよね。空の警告ボックスが表示されるだけで、理由がわかりません!

助言がありますか？

4

3 に答える 3

4

まず第一に、データベースからのみ検索し、データベースをまったく変更しない場合は、GET代わりに使用する必要があります:)また、いくつかの変更：

  1. $(this).val()代わりに使用してください。
  2. dataTypeJSON として指定します。dataType$.get()をインテリジェントに推測しようとすると、時々間違ってしまう可能性があります...特にプレーンテキストをエコーし​​ている場合。そのため、代わりに JSON を使用してみてください。後で、実際に検索結果を取得したときに DB から (配列で) 検索結果を返すときに、元に戻すことができます。
  3. PHP で、PHP 関数 を使用して結果を JSON 形式でエコーしますjson_encode()。上記の説明を参照してください。
$(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var search_term = $(this).val();
        $.get(
            'search.php',
            {
                search_term: search_term
            },
            function(data) {
                alert(data);
            },
            'json'
        });
    });
});

を使用している場合はGET、PHP スクリプトも忘れずに更新してください。

<?php
    require_once("database/db.php");
    if(isset($_GET['search_term']) && !empty($_GET['search_term'])){
        echo json_encode("something");
    }
}
?>

最適化に関するその他の注意事項:

スロットリングkeyup()。私は通常、イベントを直接リッスンすることを避けていkeyupます。ユーザーが非常に速く入力して大量のデータがやり取りされる可能性があるためです。代わりに、このプラグインで調整してみてください。実装はかなり簡単です。

$('.autosuggest').keyup($.throttle(250 ,function(){  // Unobstructive throttling

    // Your code here

}));  // Remember to close the parenthesis for the $.throttle() method

入力タイプとして「検索」を使用します。より使いやすくする<input type="search" ... />ために、検索フィールドに使用します。さらに、タイプを認識しない古いブラウザまたは互換性のないブラウザの場合、フィールドは単に元に戻ります<input type="text" ... />

フォーム データをシリアル化します。プロセスを合理化するためにシリアライゼーションに依存し、AJAX 関数が乱雑にならないようにします (そうしないと、送信するすべてのフィールドを列挙する必要があります)。これは、の代わりに(ドキュメント$('form').serialize()を参照)を使用することで簡単に実行できます。{search_term: search_term}

于 2013-09-28T17:37:18.417 に答える
0

文字列もキーとして使用できるため、 search_term 変数名が配列キーの名前と同じであることに関係していると思います。したがって、js はキーを .autosuggest の値を含む文字列に変換しています。変数名を the_search_term に変更してみてください。例：

    $(document).ready(function(){
    $('.autosuggest').keyup(function(){
        var the_search_term = $(this).attr('value');
        $.post('search.php', {search_term:the_search_term}, function(data){
            alert(data);
        });
    });
    });
于 2013-09-28T17:46:59.987 に答える