显示所有结果的jQuery UI自动完成

时间:2014-07-15 作者:Tom Oakley

我为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">
我意识到这可能是错误的编码,如果可以重新做的话。但我真正需要知道的是如何获得与搜索框中键入的字符串相关的自动完成建议。

感谢您的帮助:)

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

你得到所有的条件,因为你要求所有的条件,事实上

$tradeList = get_terms(\'trade\');
只需获取所有术语,忽略传递到文件的“term”查询字符串。

如果要获取所有术语“filterd”,必须在查询中使用字符串,例如:

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中的设置,每次用户在输入字段中键入一个字符时,都会有一个对服务器的ajax请求,因此如果用户在做出选择之前键入4个字母,您将有4个额外的http请求,这样代码很容易成为服务器杀手。

所以,如果你想使用这种方法,至少使用更高的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 常量及其用法(开始here) 和加载wp-load.php 硬编码位置路径(就像我做的那样),因为$_SERVER[\'DOCUMENT_ROOT\'] 价格不合理,可能不是预期值,具体取决于服务器的配置方式。

我建议的第二种方法可以避免wp-load.php 这个问题,也使您的服务器避免了大量请求,但javascript中的PHP代码回荡真的很糟糕,我在这个答案中只是为了简单起见才使用它。您应该将javascript代码放在一个单独的js文件中,并使用wp_localize_script.

结束