2017-09-16 69 views
0

我使用php,mysql,js和ajax创建搜索功能。但我不能选择搜索项目。我试图选择建议的单词。有负载的建议,但我不能选择它们。这里是我创建的代码。请使用我无法选择搜索项目

这是索引页。在索引页脚本部分是错误的或者不工作fadeOut效果的最后部分。

<head> 
    <title>2nd year group project</title> 
    <meta charset = "utf-8"> 
    <metaname="viewport" content="width=device-width, initial-scale=1"> 

    <!--this is for link css file--> 
    <link rel="stylesheet" type="text/css" href="css/FindAProffesional.css"> 

    <!--//this is for link icons for site--> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 

    <!--//this is for link bootstrap to site--> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
</head> 
<body> 
<div style="width:500px;"> 
<input type="text" name="country" id="country" class="form-control" placeholder="Enter city name"> 
</div> 
<div id="countryList"></div> 
<script> 
    $(document).ready(function(){ 
     $('#country').keyup(function(){ 
     var query = $(this).val(); 
     if(query!='') 
     { 
      $.ajax({ 
      url:"search.php", 
      method:"POST", 
      data:{query:query}, 
      success:function(data) 
     { 
     $('#countryList').fadeIn(); 
     $('#countryList').html(data); 
     } 
     }); 
     } 
    }); 

     $document().on('click','li',function(){ 
     $('#country').val($(this).text()); 
     $('#countryList').fadeOut(); 
     }); 
    }); 
</script> 
</body> 

这是serch.php页

<?php 
    require('dbcon.php'); 
    if(isset($_POST["query"])) 
    { 
     $output=''; 
     $query ="SELECT DISTINCT city FROM architect WHERE city LIKE '%".$_POST["query"]."%'"; 
     $result = mysqli_query($conn,$query); 
     $output = '<ul class="list-unstyled">'; 
     if(mysqli_num_rows($result) > 0) 
     { 
      while($row = mysqli_fetch_array($result)) 
      { 
       $output .='<li>'.$row["city"].'</li>'; 
      } 
     } 
     else 
     { 
      $output .='<li>City not Found</li>'; 
     } 
     $output .='</ul>'; 
     echo $output; 

    } 
?> 
+0

很难准确地了解你需要什么。您需要PHP或html/js/jquery部分的帮助吗?要测试PHP,只需使用$ _REQUEST而不是$ _POST,然后将查询作为GET发送到新选项卡http://yourdomain/search.php?query = XXX – heXer

+0

php没有问题,问题在脚本部分。我无法在搜索时选择suggetions –

+0

什么是'$ document()'? – Twisty

回答

2

更换

$document().on('click','li',function(){ 
     $('#country').val($(this).text()); 
     $('#countryList').fadeOut(); 
     }); 

$(function(){ 
    $('#countryList').on('click','li',function(){ 
    $('#country').val($(this).text()); 
    $('#countryList').fadeOut(); 
    }); 
}); 
+0

打我吧!发布问题的答案是肯定的,人们应该意识到这只适用于'click'事件。如果用户使用鼠标滚动或箭头,它将无法工作。 – Twisty

+0

现在工作。谢谢你,朋友 –