#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-файле представления