【发布时间】: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