Wordpress中用于搜索字段的jQuery UI自动完成

时间:2017-03-10 11:17:37

标签: wordpress search jquery-ui-autocomplete

我想在wordpress中使用JQuery UI Autocomplete作为我的搜索字段,但它没有工作,我没有错误。所以我在我的文件functions.php中调用了所有需要的文件:

function enqueue_scripts_refonte(){
    $style_uri = get_stylesheet_directory_uri();
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-autocomplete' );
    wp_register_style( 'jquery-ui-styles','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' );
    wp_enqueue_style( 'jquery-ui-styles' );
    wp_register_script( 'my-autocomplete', get_template_directory_uri() . '/assets/javascripts/v3/my-autocomplete.js', array( 'jquery', 'jquery-ui-autocomplete' ), '1.0', false );
    wp_localize_script( 'my-autocomplete', 'MyAutocomplete', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'my-autocomplete' );

}

始终在同一文件functions.php:

function my_search() {
        $term = strtolower( $_GET['term'] );
        $suggestions = array();

        $loop = new WP_Query( 's=' . $term );

        while( $loop->have_posts() ) {
            $loop->the_post();
            $suggestion = array();
            $suggestion['label'] = get_the_title();
            $suggestion['link'] = get_permalink();

            $suggestions[] = $suggestion;
        }

        wp_reset_query();


        $response = json_encode( $suggestions );
        echo $response;
        exit();

}

add_action( 'wp_ajax_my_search', 'my_search' );
add_action( 'wp_ajax_nopriv_my_search', 'my_search' );

然后my-autocomplete.js文件包含以下脚本:

(function( $ ) {
    $(function() {
        var term = $("#s").val(); 
        var url = MyAutocomplete.url + "?action=my_search&term="+term;
        $( "#s" ).autocomplete({
            source: url,
            delay: 500,
            minLength: 3
        }); 
    });

})( jQuery );

0 个答案:

没有答案