javascript - 如何使搜索结果“可点击”

Question

使用它返回与搜索词匹配的项目列表：

if (mysql_num_rows($result) > 0){
    while($row = mysql_fetch_object($result)){
        $string .= "<br><b>".$row->container."</b>"."  --- ";
    $string .= "  yard: ".$row->lot."";
    $string .= "  -- latitude: ".$row->lat."";
    $string .= "  -- longitude: ".$row->lng."<br />";
        $string .= "<br/>\n";
    }
}

...然后显示...

function ajax_search() {
    $("#search_results").show();
    var search_val = $("#search_term").val();
    $.post("find.php", {
        search_term: search_val
    }, function (data) {
        if (data.length > 0) {
            $("#search_results").html(data);
        }
    })
}
$(document).ready(function () {
    $("#search_results").slideUp();
    $("#search_button").click(function (e) {
        e.preventDefault();
        ajax_search();
    });
    $("#search_term").keyup(function (e) {
        e.preventDefault();
        ajax_search();
    });
});

但我对如何使这些项目可点击感到困惑，这样我就可以将 lat 和 lng 发送到地图。

抱歉，我既是新手，也是 Stackoverflow 的新手。

Answer 1

我确定服务器端语法，如果我犯了任何语法错误，请更正。

如果您对结果 html 进行细微更改，例如将每个项目包装在 div 中，这很容易

$string .= "<div class='item' data-latitude='".$row->lat."' data-longitude='".$row->lng."'><b>".$row->container."</b>"."  --- ";
$string .= "  yard: ".$row->lot."";
$string .= "  -- latitude: ".$row->lat."";
$string .= "  -- longitude: ".$row->lng."<br />";
$string .= "</div>";

然后

$(document).ready(function(){ 
$("#search_results").slideUp(); 
$("#search_button").click(function(e){ 
    e.preventDefault(); 
    ajax_search(); 
}); 

$("#search_term").keyup(function(e){ 
    e.preventDefault(); 
    ajax_search(); 
}); 

$("#search_results").on('click', '.item', function(){
    var $this = $(this);
    var lat = $this.data('latitude');
    var long =$this.data('longitude'); 
    alert(lat + long)
})

});