Javascript 我能'；t选择搜索项目_Javascript_Php_Ajax_Bootstrap 4

Javascript 我能'；t选择搜索项目

javascript php ajax bootstrap-4

Javascript 我能'；t选择搜索项目,javascript,php,ajax,bootstrap-4,Javascript,Php,Ajax,Bootstrap 4,我正在使用php、mysql、js和ajax创建搜索函数。但我无法选择搜索项目。我正在尝试选择建议的单词。有加载建议，但我无法选择它们。这是我创建的代码这是索引页。在索引页脚本部分错误或不工作的最后一部分淡出效果 <head> <title>2nd year group project</title> <meta charset = "utf-8"> <metaname="viewport" content="wid

我正在使用php、mysql、js和ajax创建搜索函数。但我无法选择搜索项目。我正在尝试选择建议的单词。有加载建议，但我无法选择它们。这是我创建的代码

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

<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>


第二年团体项目
$（文档）.ready（函数（）{
$（'#country'）.keyup（函数（）{
var query=$（this.val（）；
如果（查询！=''）
{
$.ajax({
url:“search.php”，
方法：“张贴”，
数据：{query:query}，
成功：功能（数据）
{
$（“#国家列表”）.fadeIn（）；
$（'#countryList'）.html（数据）；
}
});
}   
});
$document（）。在（'click'，'li'，函数（）上{
$（'#country'）.val（$（this.text（））；
$（“#国家列表”）.fadeOut（）；
});
});

这是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;

    }
?>

更换

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

与

很难理解你到底需要什么。您需要PHP或html/js/jquery部分的帮助吗？要测试PHP，只需使用$\u REQUEST而不是$\u POST，并将查询作为GET发送到一个新选项卡中。PHP没有问题，问题在脚本部分。当我正在搜索什么是“代码> $Debug（））/>代码>时，我不能选择这些建议。可能会考虑jQuery UI -自动完成。因为这个问题在JavaScript部分，在控制台中有任何消息吗？把我揍一顿吧！对发布的问题的可靠回答，人们应该知道，这只适用于

单击

事件。如果用户真的使用鼠标滚动或箭头，它将无法工作。

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