Ajax實時搜索-Onclick填充輸入值

使用 PHP 資料庫獲取的 JQuery/Ajax 實時車輛搜索（通過注冊）

我面臨一個問題，即當我單擊實時搜索結果時，結果不會填充到搜索輸入欄位中。

我敢肯定這將是一些基本的東西，但我已經看這個太久了，已經把冰箱弄瞎了！！

表單欄位用戶搜索：

<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 >';
     
    $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="#" >'.$vehicle['reg'].'</a>';

        }

    }

    $retval .= '</div>';

    echo $retval;
 
}

uj5u.com熱心網友回復：

請參閱我關于避免 SQL 注入攻擊的評論。

當檔案準備就緒時，您將嘗試設定事件處理程式，以便<a>標簽內的所有標簽<div id="#vehicle-output">都回應點擊事件。但那時還沒有這樣的<a>標簽，因為您還沒有進行任何實時搜索。僅僅因為您隨后將一些<a>標簽附加到<div>不會導致事件處理程式自動追溯附加。

您需要將“單擊”處理程式的設定從“檔案就緒”處理程式移動到“成功”回傳。另一個問題是$('#vehicle-output').css('display', 'none');當輸入失去焦點時呼叫隱藏 PHP 腳本的結果。問題是<a>元素在點擊事件可能發生之前變得不可見。

您可以執行以下兩項操作之一：

1. 完全擺脫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');
        }

    });

});

2. 設定一個 windows 計時器來更改 CSS顯示值，以便您確定點擊事件發生（只要確保您使用足夠大的計時器值（500 毫秒。應該這樣做）

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

標籤：

上一篇：有沒有更好的方法在一段時間后顯示內容包裝器的每個元素？

下一篇：Javascript幻燈片影像容器