Ajax and autocomplete

时间：2011-12-23 作者：kaiser

我在自定义的帖子类型上有一组元框。其中两个是简单的输入/文本类型字段，应具有自动完成的输入：

A）另一个自定义帖子类型B）用户现在我有一个问题，我需要以某种方式触发自动完成事件。到目前为止，我有一个非常简单的定义：

jQuery( document ).ready( function ($)
        {
            $( \'#some_id\' ).autocomplete(
            {
                 minLength: 2
                ,source:    "<?php print \'SOME_STRING\'; ?>"
            } );
        } );

当我输入“zz”时，控制台中给出了以下答案：

获取http://localhost/wordpress/wp admin/SOME\\u字符串？term=zz 404（未找到）

关键是我需要运行一个查询（正如您在上面看到的），并且需要root the request 对于source 来自自动完成的选项/参数somehow to a php callback.

我希望有人能向我解释一下我该怎么处理这件事。谢谢（如果你读到这封信，祝你圣诞快乐：）！

2 个回复

最合适的回答,由SO网友:Stephen Harris 整理而成

使用jQuerysgetJSON 在autocompletes源代码方法中，使用WordPress的admin ajax。php来处理请求，以避免必须查找wp负载。php（可能已被移动），并将在每次请求时加载WordPress。

First of all: get the ajax url of your WordPress blog:

这很简单：

admin_url( \'admin-ajax.php\' )

但是，我们希望在您的javascript文件中可以访问它，所以请使用wp_localize_script

wp_enqueue_script( \'myajax_jsfile_handle\', get_stylesheet_directory."/rest/of/path/to/file.js", array( \'jquery\', \'jquery-form\', \'json2\' ), false, true ); );
wp_localize_script( 
    \'myajax_jsfile_handle\', 
    \'MyAjax_object\', 
    array( 
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' ),
        \'myajax_nonce\' => wp_create_nonce( \'myajax_nonce_val\' ),
        \'action\' => \'myajax-submit\'
    )
);

在哪里myajax_jsfile_handle 是您注册的javascript文件的句柄。当您对javascript文件进行排队时，请调用上述命令。

The autocomplete source method

对于JQuery UI自动完成选项中的源。。。

source: function( request, response ) {  
    jQuery.getJSON( MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit", request, function( data ) {  
        response( jQuery.map( data, function( item ) {
            jQuery.each( item, function( i, val ) {
                val.label = val.whatever; // build result for autocomplete from suggestion array data
            } );
            return item;
        } ) );
  } );  
},

request 是键入的内容

上面所做的是获取每个项目（返回的JSONrd行）并给它们一个标签，autocomplete使用该标签来显示建议。（在上面的示例中，标签是“column”列的内容）

Tell WordPress how to do deal with the request

因此，上面向WordPress发送了一个ajax请求，操作为“myajax提交”。

当WordPress收到此消息时，它会触发操作wp_ajax_myajax-submit （如果用户已登录）或wp_ajax_nopriv_myajax-submit 如果他们不是。您可以将函数挂钩到其中一个或两个挂钩上，具体取决于您打算允许此AJAX请求的对象。我们的函数将执行任何必要的查询和JSON结果（建议）并响应它们。

        // Callback
        function get_my_suggestions() {
            // This function should query the database and get results as an array of rows:
            // GET the recieved data: \'term\' (what has been typed by the user)
            $term = $_GET[\'term\']
            $suggestions_array = array();

            // echo JSON to page  and exit.
            $response = $_GET["callback"]."(". json_encode($suggestions_array) .")";  
            echo $response;  
            exit;
        }
    add_action( \'wp_ajax_myajax-submit\', \'get_my_suggestions\' );
//For non-logged in users add_action( \'wp_ajax_nopriv_myajax-submit\', \'get_my_suggestions\' );

免责声明：该示例在任何情况下都返回空数组

SO网友:Rob Vermeer

在autocomplete源文件中（您可以在主题中放置autocomplete.php文件），放置include_once($_SERVER[\'DOCUMENT_ROOT\'].\'/wp-load.php\' ); 在脚本的顶部。然后，您可以使用$wpdb查询所需内容。

它不使用WordPress AJAX API，但它可以工作。希望这有帮助。

结束

小码农CODE

Ajax and autocomplete

相关推荐

在AJAX助手函数中检索帖子信息