试图在wordpress自定义页面中实现jQuery的搜索自动完成,但不工作

问题描述:

嗨,大家好,我刚开始开发网站和我新的WordPress,PHP,MySQL,jQuery,希望有人能够足以帮助我解决下面我试图解决了几个月的问题,谢谢试图在wordpress自定义页面中实现jQuery的搜索自动完成,但不工作

-Objective:为了使用户在搜索框中键入的职位和搜索框会自动从数据库中下降填充类似职称下来就像谷歌搜索

- 问题:WordPress的,XAMPP,PHP,HTML,MYSQL数据库名称 'jobsdatabase'

-Developer的编程能力自定义页面:降下来了类似职位没有显示

-Environment新手,刚开始开发的网站了5个月,试图解决这个问题,连续6周

- 相关的文件和位置:

  1. C:\ XAMPP \ htdocs中\ WordPress的\可湿性粉剂管理员\ ADMIN-ajax.php
  2. C:\ XAMPP \ htdocs中\ WordPress的\可湿性粉剂内容\主题\ twentysixteen \ page_search_job_form V6.php
  3. Ç :\ XAMPP \ htdocs中\ WordPress的\可湿性粉剂内容\主题\ 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

所以,为此,我把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); 
    } 
}); 

发送对象的数据部分,因此我确信,在输入值被公布为$彦博值[“搜索” ],但你可以做任何你喜欢的事情。现在

我的PHP只是一个简单的测试:

$searchform_jobtitle = ucfirst($_POST["search"]); 
echo $searchform_jobtitle; 

这都说明它的工作原理。对于你的代码,你将要决定如何你想要的工作,因为这是不会知道如何唤起你的特别的方法,这样的事情应该工作:

if (isset($_POST["search"])) { 
    jobTitleSearch(); 
} 

function jobTitleSearch() { 
    $searchform_jobtitle = ucfirst($_POST["search"]); 
    // TODO 
} 
+0

Maytch你好,谢谢你的回应。根据您的建议,我已经添加了输入ID =“searchform_jobtitle”,并修改了我的jQuery中的“URL”以指向该目录,我得到了mysql的响应,不幸的是,响应不像预期的那样。数据库条目 – Francis96

+0

我实际上已经尝试过使用您的代码“数据:{ search:$('#searchform_jobtitle').val() },但mysql仍然回应0 – Francis96

+0

我也尝试了一些过去一周的其他更改但仍然没有工作,请帮助,谢谢 – Francis96