ホーム>プログラミング関連>その他のソースコード
ダウンロード

AJAX ライブ検索

*** これはもう保守されていません *** このプロジェクトは数年前に開始しましたが、これまでに多くのことが変更されました。また、異なるレイヤー間の結合や古いテクノロジー (jQuery!) のため、これはスケーラブルなプロジェクトではありません。すべてのサポートに感謝しますが、残念ながらこのプロジェクトはアーカイブしなければなりません:(

AJAX Live Search は、Google オートコンプリート機能と同様に、入力時に検索して結果を表示する jQuery プラグイン/PHP 検索フォームです。

デモ

実際に動作を確認してください。

ブラウザのサポート

IE8+ ✔クロム ✔ Firefox ✔オペラ ✔サファリ ✔

このプロジェクトをサポートしてくださった BrowserStack と JetBrains に感謝します。

Ajax ライブ検索を始める

ダミーのデータベースとテーブルの作成を含め、 index.phpの現在の例が動作するまでに 7 分以上かかることはありません。ただし、既存のプロジェクトに統合する必要がある場合はさらに時間がかかります。このテキストフィールドがあると仮定して、これを実現するには:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

  1. core 、 css 、 font 、 img 、 jsおよびtemplatesを含むフォルダーをプロジェクトにコピーします。

  2. core/Config.template.phpで必要な構成、特にデータベース構成を指定し、ファイルの名前をConfig.phpに変更します。このファイルには、PHP 構成の表で説明したプラグインのすべてのバックエンド設定が含まれています。

  3. ページにjs/ajaxlivesearch.min.jsまたはjs/ajaxlivesearch.jsとcss/ajaxlivesearch.min.cssまたはcss/ajaxlivesearch.cssを含めます。

  4. core/AjaxProcessor.phpのAccess-Control-Allow-Origin headerの URL をプロジェクト URL に変更します。現在はhttps://ajaxlivesearch.comです。

  5. core/Handler.phpとcore/Config.phpが (PHP) ページに含まれており、ファイルの先頭に次の行があることを確認してください ( index.phpを確認してください)。 

     use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();

  6. 最後に、プラグインをテキスト フィールドにフックし、必要なオプション (loaded_at および token) を渡します。

jQuery("#ls_query").ajaxlivesearch({load_at: , token: getToken() . "'"; ?>, max_input: , }); 「」

必要に応じて、追加のパラメータをサーバーに送信することもできます。これを実現するには、検索入力にdata属性を追加する必要があります。 

 <input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">

たとえば、この場合、次のように PHP で data 属性にアクセスできます。 

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

jQuery オプション

名前タイプ必須説明
ロード済み_at整数はいこれは、ボットによる検索を防ぐために使用されます。
トークン弦はいこれは、CSRF 攻撃を防ぐために使用されます。
URL弦いいえデフォルト: ajax/process_livesearch.php。
キャッシュブール値いいえこれは、Ajax リクエストのキャッシュを指します。デフォルト: false
form_anti_bot弦いいえデフォルト: ajaxlivesearch_guard
スライド速度弦いいえデフォルト: 速い
タイプ_遅延整数いいえデフォルト: 350
最大入力整数いいえデフォルト: 20
min_chars_to_search整数いいえ検索を開始する最小文字数。デフォルト: 0
ページ範囲配列いいえデフォルト: [0、5、10]
ページ範囲のデフォルト整数いいえデフォルト: 5
form_anti_bot_class弦いいえデフォルト: ls_anti_bot
フッタークラス弦いいえデフォルト: ls_result_footer
next_page_class弦いいえデフォルト: ls_next_page
前のページのクラス弦いいえデフォルト: ls_previous_page
ページ制限弦いいえデフォルト: page_limit
結果ラッパークラス弦いいえデフォルト: ls_result_div
結果クラス弦いいえデフォルト: ls_result_main
コンテナクラス弦いいえデフォルト: ls_container
ページネーションクラス弦いいえデフォルト: ページネーション
フォームクラス弦いいえデフォルト: 検索
ロードされた_at_class弦いいえデフォルト: ls_page_loaded_at
トークンクラス弦いいえデフォルト: ls_token
current_page_hidden_​​class弦いいえデフォルト: ls_current_page
current_page_lbl_class弦いいえデフォルト: ls_current_page_lbl
last_page_lbl_class弦いいえデフォルト: ls_last_page_lbl
total_page_lbl_class弦いいえデフォルト: ls_last_page_lbl
ページ範囲クラス弦いいえデフォルト: ls_items_per_page
ナビゲーションクラス弦いいえデフォルト: ナビゲーション
arrow_class弦いいえデフォルト: 矢印

カスタムイベント

名前
onResultClick
onResultEnter
onAjaxComplete

例： 

 jQuery(".mySearch").ajaxlivesearch({
    loaded_at: <?php echo time(); ?>,
    token: <?php echo "'" . $handler->getToken() . "'"; ?>,
    max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
    onResultClick: function(e, data) {
        // get the index 1 (second column) value
        var selectedOne = jQuery(data.selected).find('td').eq('1').text();

        // set the input value
        jQuery('#ls_query').val(selectedOne);

        // hide the result
        jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
    },
    onResultEnter: function(e, data) {
        // do whatever you want
        // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
    },
    onAjaxComplete: function(e, data) {

    }
});

カスタムトリガー

名前
ajaxlivesearch: Hide_result
ajaxlivesearch:検索

PHP 構成

名前タイプ必須説明
データソース配列はい各検索テキスト フィールドのデータ ソース。キーはフィールド HTML id を参照しています。現在、MySQL と mongoDB (ベータ版) がサポートされています。

MySQL データソース構成:
名前タイプ必須説明
ホスト弦はいMySQL データベースのホスト。通常は「localhost」です。
データベース弦はいMySQL データベース名。
ユーザー名弦はいMySQL データベースのユーザー名。
合格弦はいMySQL データベースのユーザー名、パスワード。
テーブル弦はいライブ検索が検索する MySQL データベース テーブル。
検索列配列はいライブ検索が検索する検索列。1 つまたは複数にすることができます。例: array('column_name_1', 'column_name_2')
注文方法弦いいえ結果がそれに基づいて並べられる列。
注文方向弦いいえ注文方向: 「orderBy」の場合は「ASC」または「DESC」。デフォルト値: ASC
フィルタ結果配列いいえ結果に含める必要がある列。空の場合は、すべての列が返されます。
比較演算子弦はい検索クエリの比較演算子。比較演算子の可能な値は、「LIKE」と「=」です。
検索パターン弦はいこれは、クエリの検索方法を指定するために使用されます。可能な値は次のとおりです: `q`、`*q`、`q*`、`*q*`。
大文字と小文字を区別弦はい検索クエリの大文字と小文字の区別
maxResult整数いいえこれは、結果の最大数を制限するために使用されます。
ディスプレイヘッダー配列いいえこれは、結果のヘッダーを表示または非表示にするために使用されます。 「active」が true に設定されている場合、ヘッダーが表示されます。また、列を異なるタイトルにマップすることもできます。
タイプ弦はいデータソースのタイプ。現在可能な値は、「mysql」または「mongo」です。
アンチボット弦はいこれは、JavaScript を使用しないボットからのフォーム送信を防ぐセキュリティ技術として使用されます。この手法では、jQuery を使用して隠しフィールドにこの値が設定されます。任意の値を指定できますが、jQuery プラグインに渡される `form_anti_bot` オプションと同じでなければなりません。デフォルトでは、「ajaxlivesearch_guard」に設定されています。
検索開始時間オフセット整数はいこれは、ボットに対する別のセキュリティ技術に使用されます。一部のボットは、ページの読み込みが完了するとすぐにフォームを送信します。しかし、人間の場合、フィールドを埋めるにはさらに時間がかかります。デフォルトでは、このパラメータは 3 秒に設定されています。 3 秒を超える時間を割り当てることはお勧めできません。
maxInputLength整数はい検索フィールドの最大文字長を指定します。
テンプレート弦はいこれは、テンプレート フォルダーにあるテンプレート名を指定します。

よくある質問

  • anti_bot と token を無効にする場合のリスクは何ですか?

    form_anti_botは便利なセキュリティ機能ですが、削除しても問題ありません。これを実現するには、 core/AjaxProcessor.phpのvalidateRequest()を変更し、 $_POST['ls_anti_bot']を削除し、 core/Handler.phpのverifySessionValue($sessionParameter, $sessionValue)変更する必要があります。対照的に、 token削除すると、誰でもフォームを作成し、サーバーをデータ ソースとして使用できるようになるため、お勧めできません。現在、ページ/検索フォームがロードされるたびに、フォーム ページ (現在の例ではindex.php ) でgetToken()呼び出すことによって新しいトークンが生成されます。次に、サーバーへの新しいリクエストの検索/送信時に、 verifySessionValue($sessionParameter, $sessionValue)を使用してトークンと anti_bot がチェックされます。これがやりすぎだと思われる場合は、 getToken()で既存のセッションに対して同じトークンを返します。

  • 結果で列を非表示にするにはどうすればよいですか?

    これはテンプレートで実現できます。例はtemplates/hiddenColumn.phpにあります。

ライセンス

MITライセンス

もしよかったらコーヒーを半分買ってきてください！

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて