web-dev-qa-db-ja.com

すべての結果を表示するjQuery UIオートコンパイル

私はWordPressカテゴリ用の自動補完検索ボックス（実際にはカスタム分類法）を作成しました。ただし、1つのキーを入力すると、その文字列がいずれかのカテゴリに一致するかどうかにかかわらず、すべての結果が表示されます。

これが私のPHPコードです（autocomplete.php、私のテーマディレクトリのルートにあります）：

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php' ); // I know the traditional way to do it is loading admin_ajax but I read this was exactly the same and didn't increase the overhead to the server
if (isset($_GET['term'])) { // I suspect the problem is something to with this
    $tradeList = get_terms('trade');
    $tradeNames = Array();
    foreach ($tradeList as $trade) {
        $tradeName = $trade->name;
        array_Push($tradeNames, $tradeName);
    }
    echo json_encode($tradeNames);
}
?>

そして私のJavascriptコード：

$(document).ready(function() {
    $(".main-search-field").autocomplete({
        source: "/wp-content/themes/local_directory/autocomplete.php",
        minLength: 1
    }); 
});

そして最後にHTML：

<input type="text" class="main-search-field" name="search" id="search">

気軽にやり直してください。しかし、私が本当に知る必要があるのは、オートコンプリート候補を検索ボックスに入力された文字列に関連させる方法です。

助けてくれてありがとう:)

ajaxsearchjquery-uiautocomplete
1
Tom Oakley

あなたはすべての用語、実際には、行を求めているので、すべての用語を取得します

$tradeList = get_terms('trade');

ファイルに渡された「term」クエリ文字列を無視して、すべての用語を取得するだけです。

「フィルター処理済み」という用語をすべて取得するには、クエリで次のような文字列を使用する必要があります。

include_once( '../../../wp-load.php' ); // adjust the path, of course
// or dirname( dirname( dirname( __FILE__ ) ) ) . '/wp-load.php';
$term = filter_input( INPUT_GET, 'term', FILTER_SANITIZE_STRING );
if ( empty( $term ) ) exit();
$trades = get_terms( 'trade', array( 'name__like' => $term, 'fields' => 'names' ) );
if ( ! empty( $trades ) && is_array( $trades ) ) {
  echo json_encode( $trades );
}

ただし、OPの設定を使用すると、ユーザーが入力フィールドにcharを入力するたびにサーバーへのajaxリクエストがあるため、ユーザーが選択する前に4文字を入力すると、追加のhttpリクエストが4つあることに注意してください、コードが簡単にサーバーキラーになります。

したがって、このアプローチを使用する場合は、少なくともより高いminLength引数を使用してください。

別の方法は、すべての用語を取得し、それらをjavascript配列として出力し、スクリプトに次のようなフィルタリングを行わせることです。

$(document).ready(function() {
  var trades = <?php
  $trades = get_terms( 'trade', array( 'fields' => 'names' ) );
  echo '["' . implode( '","', $trades ) . '"]';
  ?>;
  $(".main-search-field").autocomplete({
    source: trades,
    minLength: 1
  }); 
});

これを行うと、追加のhttp要求はなく、autocomplete.phpファイルは不要であり、数千の取引条件がない限り、このアプローチはおそらくより良い方法です。

ノート

最初のアプローチでは、wp-load.phpの大まかな組み込みは悪い習慣です。「サーバーをオーバーヘッドにしない」ためにそれを行っていることは知っていますが、悪いニュースは、サーバーのオーバーヘッドがそれほど減少しないことです方法：すべてのWordPress環境、すべてのプラグイン、テーマをロードします。さらに、コードを共有するには不適切であることに注意してください。コードがあなただけのもので、本当にこのアプローチを使用したい場合は、SHORTINIT定数とその使用方法を検索し（開始 ここ ）、ロケーションパスをハードコーディングしてwp-load.phpをロードします（私がしたように） $_SERVER['DOCUMENT_ROOT']は手頃な価格ではないため、サーバーの構成方法によっては期待される値ではない場合があります。

私が提案した2番目のアプローチは、wp-load.php問題からあなたを救い、また多数のリクエストからあなたのサーバーを救いますが、javascriptにエコーされたPHPコードは本当に悪いものです。この答えの簡潔さ。 JavaScriptコードを別のjsファイルに入れ、 wp_localize_script を使用して用語を渡す必要があります。

0
gmazzap