我正在尝试创建一个搜索栏,当用户在文本字段中键入内容时,它会显示帖子的标题。
我对这个完全陌生,我真的不知道该怎么做。我该怎么办?
以下是文本输入html元素:
<input type=\'text\' id=\'searchField\' class=\'pushLeft tabRight hide\' onKeyUp="autoSearch(\'<?php echo esc_js(site_url()); ?>\')"/>
这里是javascript,我想指出它位于一个名为“js”的文件夹中,这是我的javascript文件“general.js”:
function autoSearch(link)
{
$("#searchResults").width($("#searchArea").width());
if($("#searchField").val() != "")
{
$.post(link,{autoSearch:"", value:$("#searchField").val()},function(data){
$("#searchResults").show();
$("#searchResults").html(data.everything);
},"json");
}
else
{
$("#searchResults").hide();
}
}
然后在函数中。php我有以下代码部分:
isset( $_POST[\'autoSearch\'] ) && add_action( \'after_setup_theme\', \'wpse_60353_autosearch\' );
function wpse_60353_autosearch()
{
global $wpdb;
$searchQuery = mysql_escape_string($_POST[\'value\']);
$mypostids = $wpdb->get_col("SELECT ID FROM $wpdb->posts WHERE post_title LIKE \'$searchQuery\' LIMIT 5");
$args = array(\'post__in=\'.$mypostids);
$res = new WP_Query($arg);
$titles ="";
while ( $res->have_posts() ) : $res->the_post();
$titles .= get_the_title().\'<br />\';
endwhile;
echo json_encode(array("everything"=>"hello"));
wp_reset_postdata();
exit; // All done, stop WP continuing
}
我收到一个帖子回复说:
301 Moved Permanently
最合适的回答,由SO网友:TheDeadMedic 整理而成
那么“autoSearch.php”有以下代码:
如果仅此而已,难怪会出现错误-WP甚至没有加载!
将此添加到functions.php
isset( $_POST[\'autoSearch\'] ) && add_action( \'after_setup_theme\', \'wpse_60353_autosearch\' );
function wpse_60353_autosearch()
{
// The autoSearch.php code you posted in your question
exit; // All done, stop WP continuing
}
现在只需将主URL用于AJAX请求。该函数将截取默认WordPress运行时;按预期返回数据。
$.post( "<?php echo esc_js( site_url() ) ?>" ...
使用此技术意味着您可以访问内部的所有WP
wpse_60353_autosearch
, 无需指向外部文件&
脏兮兮的加载WPrequire \'../../../wp-load.php
(或类似)。<小时>Update: 首先,我强烈建议使用typewatch - 使用onkeyup
会为了你的需要而频繁地发出请求;更不用说服务器过载了,这会让用户很恼火。
其次,我注意到您的查询中有一个错误:
$args = array( \'post__in=\'.$mypostids ); // This concats your IDs array to a string
$args = array( \'post__in\' => $mypostids ); // See the difference?
事实上,我会重写它以使用初始结果-保存查询(&A);应该让事情变得轻松:isset( $_POST[\'autoSearch\'] ) && add_action( \'after_setup_theme\', \'wpse_60353_autosearch\' );
function wpse_60353_autosearch()
{
global $wpdb;
$query = like_escape( $_POST[\'autoSearch\'] );
$posts = $wpdb->get_results( $wpdb->prepare( "
SELECT * FROM $wpdb->posts
WHERE
post_status = \'publish\' AND
post_title LIKE %s AND
post_type IN ( \'post\', \'page\' )
ORDER BY
post_date DESC
LIMIT 5",
"%$query%"
));
// update_post_caches( &$posts, $post_type, $update_term_cache, $update_meta_cache )
update_post_caches( $posts, \'post\', false, true );
$titles = array();
foreach ( $posts as $post )
$titles[] = get_the_title( $post->ID );
header( \'Content-Type: application/json; charset=UTF-8\' );
echo json_encode( array( \'everything\' => implode( \'<br />\', $titles ) ) );
exit;
}
对于您的JS:function autoSearch( link )
{
var $results = $( "#searchResults" ).width( $( "#searchArea" ).width() ), s = $( "#searchField" ).val();
if ( s != "" ) {
$.post( link, { autoSearch: s }, function ( data ) {
$results.show().html( data.everything );
}, "json" );
} else {
$results.hide();
}
}
请注意,我已经在自己的安装上测试了此代码;可以确认它按预期工作:键入搜索词最多显示5个找到的标题,否则,如果没有结果,结果div将隐藏。