Ajax 实时搜索 - 单击填充输入值

Question

JQuery/Ajax 使用 PHP 数据库获取

实时车辆搜索（通过注册）

我遇到了一个问题，即当我点击实时搜索结果时，结果没有填充到搜索输入字段中。

我确定它会是一些基本的东西，但我已经看这个太久了，已经把冰箱弄瞎了！！

表单字段用户搜索：

<form>
  <input type="text" id="vehicle" name="vehicle" value="">
  <div id="vehicle-output"></div>
</form>

Jquery/Ajax 在页脚中

$(document).ready(function(){
    /// Live Search ///
    $("#vehicle").keyup(function(){

        var query = $(this).val();
        if (query !="") {
            $.ajax({
                url:"includes/veh-search.php",
                type:"POST",
                cache:false,
                data:{query:query},
                success:function(data){

                    $("#vehicle-output").html(data);
                    $('#vehicle-output').css('display', 'block');

                    $("#vehicle").focusout(function(){
                        $('#vehicle-output').css('display', 'none');
                    });
                    $("#vehicle").focusin(function(){
                        $('#vehicle-output').css('display', 'block');
                    });
                }

            });
        }

        else {
            $("#vehicle-output").html("");  
            $('#vehicle-output').css('display', 'none');
        }

    });
    /// Click to enter result ///
    $("#vehicle-output a").on("click", function(){
        $("#vehicle").val($(this).html());
    });

});

PHP/MySQL 用于搜索

include('db.php');

if(isset($_POST['query'])) {

    $retval = '';

    $retval .= '<div class="list-group">';
     
    $result = $db->query("SELECT * FROM vehicles WHERE reg LIKE '%{$_POST['query']}%' LIMIT 10");
 
    if ($result->num_rows > 0) {

        while ($vehicle = $result->fetch_assoc()) {
            
            $retval .= '<a href="#" class="list-group-item list-group-item-action">'.$vehicle['reg'].'</a>';

        }

    }

    $retval .= '</div>';

    echo $retval;
 
}

Answer 1

请参阅我关于避免 SQL 注入攻击的评论。

当文档准备就绪时，您正在尝试设置事件处理程序，以便 <div id="#vehicle-output"> 标记内的所有 <a> 标记都将响应单击事件。但那时还没有这样的 <a> 标签，因为您还没有进行任何实时搜索。仅仅因为您随后将一些 <a> 标记附加到 <div> 不会导致事件处理程序自动追溯附加。

您需要将“点击”处理程序的设置从“文档准备就绪”处理程序移至“成功”处理程序return。另一个问题是当输入失去焦点时调用 $('#vehicle-output').css('display', 'none'); 隐藏 PHP 脚本的结果。问题是 <a> 元素在点击事件发生之前变得不可见。

您可以执行以下两项操作之一：

完全摆脱 focusin 和 focusout 事件

$(document).ready(function(){
    /// Live Search ///
    $("#vehicle").keyup(function(){

        var query = $(this).val();
        if (query !="") {
            $.ajax({
                url:"includes/veh-search.php",
                type:"POST",
                cache:false,
                data:{query:query},
                success:function(data){

                    $("#vehicle-output").html(data);
                    $('#vehicle-output').css('display', 'block');

                    /// Click to enter result ///
                    $("#vehicle-output a").on("click", function(){
                        $("#vehicle").val($(this).html());
                    });
                }

            });
        }

        else {
            $("#vehicle-output").html("");
            $('#vehicle-output').css('display', 'none');
        }

    });

});

设置一个windows定时器来改变CSS显示值，这样你就可以确定点击事件发生了（只要确保你使用足够大的计时器值（500 毫秒应该可以）

                    $("#vehicle").focusout(function(){
                        window.setTimeout(function() {
                            $('#vehicle-output').css('display', 'none');
                        }, 500);
                    });

Ajax 实时搜索 - 单击填充输入值

Ajax LIve Search - Onclick Populate Input Value

php

mysql

ajax

jquery