2013-06-25 56 views
1

我试图将jquery自动完成添加到wordpress。我有一个工作的jquery ajax搜索获取用户名。如何将jquery自动完成添加到wordpress

我想用autocomplet做到这一点。我注意到我们需要使用杰森来传递数据。

有人可以指导我正确的方式来做到这一点。这里是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); 
      } 
    }); 
}); 

这里是PHP代码的WordPress插件

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的autocomplet例子,我发现这个

$("#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。 如何做到这一点?

+0

1:您的php代码的哪部分接受JSON请求,并可以回复JSON响应? 2:在自动完成的源属性中,你可以指定一个回调函数,像这个函数(request,response){}来自jquery docs:http://jqueryui.com/autocomplete/#remote-jsonp – rusln

回答

1

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

相关问题