Squeak.ru - шаблоны программирования

Как сделать результаты поиска кликабельными

Используя это, чтобы вернуть список элементов, соответствующих поисковому запросу:

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

но я не понимаю, как сделать эти элементы кликабельными, чтобы я мог отправлять широту и долготу на карту.

Извините, я новичок в этом и новичок в Stackoverflow.

26.04.2013

  • Что вы хотите, чтобы произошло, когда вы нажимаете на результат поиска? 26.04.2013
  • Всегда форматируйте свой код, чтобы другие могли лучше читать и понимать ваш код. Нам легче вам помочь. Благодарю вас! 26.04.2013

Ответы:


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

}); 
26.04.2013
  • Могу ли я предложить обернуть якоря, а не элементы div, чтобы их можно было щелкнуть с помощью клавиатуры для пользователей, которые не могут использовать мышь или другое указывающее устройство? 26.04.2013
  • @nnnnnn это должно быть хорошо, тогда обработчик кликов должен вернуть false 26.04.2013
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...