【问题标题】:how to add jquery autocomplete to wordpress如何将jquery自动完成添加到wordpress
【发布时间】:2013-06-22 10:06:31
【问题描述】:

我试图将 Jquery 自动完成添加到 wordpress。我有一个有效的 jquery ajax 搜索,它可以获取用户名。

我想用自动补全来做。我注意到我们需要使用 jason 来传递数据。

有人可以指导我正确的方法来做到这一点。这是header.php

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/></script>

这是我尝试实现的 javascript。

  $("#searchbox").keyup(function(e){
        e.preventDefault();
        var search_val=$("#searchbox").val(); 
        $.ajax({
            type:"POST",
            url: "./wp-admin/admin-ajax.php",
            data: {
                action:'wpay_search', 
                user_name:search_val
            },
            success:function(data){

                //if(data==""){
                //  return false;
                //}
                $('#search_result').html(data);
            }
    });   
});

这是wordpress插件中的php代码

function wpay_search() {

    global $wpdb;
    $name=$_POST['user_name'];
    $employee=$wpdb->get_results("SELECT First_Name FROM table_list WHERE First_name LIKE '$name%' ");

    foreach($employee as $key=> $value){

     echo '<ul>';
     echo '<li>'.$value->First_Name;'</li>';
     echo '</ul>';
  //   echo $value->post_content;

   }

    //wp_reset_query();
    die();
} // end theme_custom_handler
add_action( 'wp_ajax_wpay_search', 'wpay_search' );
add_action( 'wp_ajax_nopriv_wpay_search', 'wpay_search' );

在 jquery 自动完成示例中我发现了这个

$( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

由于我使用 wordpress,因此我不清楚如何将数据传递到 source。 如何做到这一点?

【问题讨论】:

  • 1:您的 php 代码的哪一部分接受 JSON 请求并可以回复 JSON 响应? 2:在您的自动完成源属性中,您可以从 jquery 文档中指定一个回调函数,例如这个函数(请求,响应){}:jqueryui.com/autocomplete/#remote-jsonp

标签: php wordpress jquery-ui autocomplete


【解决方案1】:

用 json 编码字符串后,我可以解决这个问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-07-19
    • 2012-05-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-15
    • 1970-01-01
    相关资源
    最近更新 更多