How to make search results "clickable"

Question

Using this to return a list of items that match the search term:

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";
    }
}

...and then this to display...

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();
    });
});

but I'm stumped on how to make these items clickable so I can send lat and lng to a map.

Sorry I'm both new to this and new to Stackoverflow.

What do you want to happen when you click on a search result? — tymeJV, Apr 26 '13 at 00:28
Always format your code, so that others can read and understand your code better. It makes it easier for us to help you. Thank you! — Felix Kling, Apr 26 '13 at 00:37

score 0 · Answer 1 · answered Apr 26 '13 at 00:34

I'm sure about the server side syntax, please correct it if I made any syntactical mistakes.

It is easy if you an do minor changes to the result html, like wrap each item in a 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>";

then

$(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)
})

});

May I suggest wrapping in anchors rather than divs, so that they will be "clickable" via the keyboard for users who can't use a mouse or other pointing device? — nnnnnn, Apr 26 '13 at 00:40
@nnnnnn that should be fine, then the click handler have to return false — Arun P Johny, Apr 26 '13 at 00:42

How to make search results "clickable"

1 Answers1

Linked