Как назначить значение в режиме реального времени по щелчку мыши

#javascript #php #jquery #ajax

#язык JavaScript #php #jquery #аякс

Вопрос:

Таким образом, приведенный ниже код работает идеально, но мне хотелось бы, чтобы кто-нибудь помог мне с одним щелчком по результату поиска, чтобы получить идентификатор искомого элемента и открыть его на другой странице, проанализировав идентификатор элемента по URL. ПОЛУЧИТЬ предпочтительно.

backend-search.php

  lt;?php /* Attempt MySQL server connection. Assuming you are running MySQL server with default setting (user 'root' with no password) */ $link = mysqli_connect("localhost","","","");   // Check connection if($link === false){  die("ERROR: Could not connect. " . mysqli_connect_error()); }   if(isset($_REQUEST["term"])){  // Prepare a select statement  $sql = "SELECT * FROM countries WHERE country_name LIKE ?";    if($stmt = mysqli_prepare($link, $sql)){  // Bind variables to the prepared statement as parameters  mysqli_stmt_bind_param($stmt, "s", $param_term);    // Set parameters  $param_term = $_REQUEST["term"] . '%';    // Attempt to execute the prepared statement  if(mysqli_stmt_execute($stmt)){  $result = mysqli_stmt_get_result($stmt);    // Check number of rows in the result set  if(mysqli_num_rows($result) gt; 0){  // Fetch result rows as an associative array  while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){  echo "lt;pgt;" . $row["country_name"] . "lt;/pgt;";  echo "lt;pgt;" . $row["id"] . "lt;/pgt;";     }  } else{  echo "lt;pgt;Not foundlt;/pgt;";  }  } else{  echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);  }  }    // Close statement  mysqli_stmt_close($stmt); }   // close connection mysqli_close($link); ?gt;    

Выше приведен код, который запрашивает базу данных для получения списка значений массива для отображения в результатах поиска, и его идентификатор для search.php. Найдите ниже страницы индекса для живого поиска:

index.php

 $(document).ready(function() {  $('.search-box input[type="text"]').on("keyup input", function() {  /* Get input value on change */  var inputVal = $(this).val();  var resultDropdown = $(this).siblings(".result");  if (inputVal.length) {  $.get("backend-search.php", {  term: inputVal  }).done(function(data) {  // Display the returned data in browser  resultDropdown.html(data);  });  } else {  resultDropdown.empty();  }  });   // Set search input value on click of result item  $(document).on("click", ".result p", function() {     $(this).parents(".search-box").find('input[type="text"]').val($(this).text());   $(this).parent(".result").empty();    }); }); 
 body {  font-family: Arail, sans-serif; }   /* Formatting search box */  .search-box {  width: 300px;  position: relative;  display: inline-block;  font-size: 14px; }  .search-box input[type="text"] {  height: 32px;  padding: 5px 10px;  border: 1px solid #CCCCCC;  font-size: 14px; }  .result {  position: absolute;  z-index: 999;  top: 100%;  left: 0; }  .search-box input[type="text"], .result {  width: 100%;  box-sizing: border-box; }   /* Formatting result items */  .result p {  margin: 0;  padding: 7px 10px;  border: 1px solid #CCCCCC;  border-top: none;  cursor: pointer; }  .result p:hover {  background: #f2f2f2; } 
 lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"gt;lt;/scriptgt; lt;div class="search-box"gt;  lt;input type="text" autocomplete="off" placeholder="Search country..." /gt;  lt;div class="result"gt;lt;/divgt; lt;/divgt; 

Выше приведен код ajax, который вызывает backend-search.php и в нем есть поле ввода для фильтра поиска. То

 lt;div class"result"gt;lt;/divgt;   

является выпадающим списком для результата фильтра поиска. Что я хочу, так это нажать на

  lt;div class"result"gt;lt;/divgt;   

он должен перенаправить пользователя на другую страницу с идентификатором выбранного элемента. Например «новая страница.php?id=2».

Пожалуйста, найдите ниже скриншот вывода введите описание изображения здесь

Комментарии:

1. Пожалуйста, покажите визуализированный пример вывода php

2. @mplungjan, пожалуйста, найдите обновление с выводом результата поиска.

3. Отображается как в исходном html-файле представления