尝试在 wordpress 自定义页面中实现 jQuery 以进行搜索自动完成但不工作
Posted
技术标签:
【中文标题】尝试在 wordpress 自定义页面中实现 jQuery 以进行搜索自动完成但不工作【英文标题】：Trying to implement jQuery in wordpress custom page for search autocomplete but is not working 【发布时间】：2017-04-18 18:55:01 【问题描述】：大家好，我刚开始开发网站，我是 wordpress、php、mysql、jquery 的新手，希望有人能帮助我解决以下我试图解决数月的问题，谢谢
-目标：为了让用户能够在搜索框中输入职位，搜索框会像谷歌搜索一样在下拉列表中自动填充数据库中的相似职位
-问题：类似工作的下拉菜单没有显示
-环境： Wordpress、XAMPP、php、html、MYSQL 数据库名称“jobsdatabase”上的自定义页面
-开发者的编程能力：初学者，刚开始开发网站5个月，尝试解决这个问题6周
- 相关文件和位置：
-
C:\xampp\htdocs\wordpress\wp-admin\admin-ajax.php
C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen\page_search_job_form V6.php
C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen\functions.php
page_search_job_form V6.php
$(document).ready(function()
jQuery('#searchform_jobtitle').keyup(ajaxsubmit);
function ajaxsubmit()
var searchform_jobtitle = jQuery(this).serialize();
jQuery.ajax(
url:'/wordpress/wp-admin/admin-ajax.php',
//my admin-ajax.php folder directory is C:\xampp\htdocs\wordpress\wp-admin\admin-ajax.php,
//i have also tried using "/wp-admin/admin-ajax.php" but it is not working
method:"POST",
action:"searchform_jobtitle",
// i have tried using data:"searchform_jobtitle" as well but it is not working
success:function(data)
jQuery("#jobtitle").fadeIn();
jQuery("#jobtitle").html(data);
,
error: function(errorThrown)
alert(errorThrown);
);
);
</script>
</head>
<body>
<form action="/" form type="post" id="searchform_jobtitle" style="width:500px;">
<input type="text" name="s" placeholder="Search...">
</form>
<div id="jobtitle"></div>
</body>
functions.php
<?php
add_action('wp_ajax_searchform_jobtitle','searchform_jobtitle');
add_action('wp_ajax_nopriv_searchform_jobtitle','searchform_jobtitle');
function searchform_jobtitle()
$searchform_jobtitle = ucfirst($_POST["action"]);
$con = mysqli_connect('127.0.0.1','root','');
if(!$con)
echo 'Not connected to server';
$con->print_error();
else
echo 'connected to server';
if(!mysqli_select_db($con,'jobsdatabase'))
echo 'Database not selected';
$con->print_error();
else
echo 'Database selected';
if(isset($_POST["action"]))
$query = "SELECT * FROM job_info WHERE job_title like '%".$_post["action"]."%'";
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0)
while($row = mysqli_fetch_array($result))
$output .= '<li>'.$row["job_title"].'</li>';
else
$output .= '<li>Job Not Found</li>';
echo $output;
mysqli_close($con);
die();
?>
Data in Mysql DB job_info as below:
job_title
----------
IT project manager
Business analyst
programmer
cleaner
house cleaner【问题讨论】：
【参考方案1】：为此，我将 ID“searchform_jobtitle”放在输入本身上，因为您的 JS 在 keyup 上发送 AJAX，它不需要表单。
接下来，这里是 AJAX 代码：
$.ajax(
url:'test.php',
method:"POST",
data:
search: $('#searchform_jobtitle').val()
,
success: function(data)
console.log(data);
$("#jobtitle").fadeIn();
$("#jobtitle").html(data);
,
error: function(errorThrown)
console.log(errorThrown);
);
在数据部分发送一个对象，这样我就可以确定输入中的值作为 $_POST['search'] 的值发布，但你可以用它做任何你喜欢的事情。
现在我的 PHP 只是一个简单的测试：
$searchform_jobtitle = ucfirst($_POST["search"]);
echo $searchform_jobtitle;
这表明它有效。对于您的代码，您将要决定您希望它如何工作，因为它不会知道如何唤起您的特定方法，这样的事情应该可以工作：
if (isset($_POST["search"]))
jobTitleSearch();
function jobTitleSearch()
$searchform_jobtitle = ucfirst($_POST["search"]);
// TODO
【讨论】：
您好 Maytch，感谢您的回复。根据您的建议，我添加了输入 id="searchform_jobtitle" 并在我的 jQuery 中修改了“URL”以指向目录，不幸的是，我收到了来自 mysql 的响应，但响应与预期不符。mysql 不断返回所有行数据库条目 我实际上已经尝试过使用你的代码“数据：搜索：$('#searchform_jobtitle').val()，但是mysql一直响应0 过去一周我也尝试了其他一些更改，但仍然无法正常工作，请帮助，谢谢 我实际上已经尝试在 page_search_job_form V6.php 中的 jQuery.ajax 之前添加 if (searchform_jobtitle.length >= 3) 但也不起作用以上是关于尝试在 wordpress 自定义页面中实现 jQuery 以进行搜索自动完成但不工作的主要内容，如果未能解决你的问题，请参考以下文章