PHP development: realizing search keyword prompts and automatic completion functions
In today's Internet era, search engines have become one of the important channels for people to obtain information. In website development, the importance of search function is self-evident. In order to improve user experience and search results, implementing search keyword prompts and automatic completion functions is a very valuable and necessary development task. This article will introduce how to implement search keyword prompts and automatic completion functions in PHP development, and provide specific code examples.
Search keyword prompts mean that when the user enters the search keyword, relevant search suggestions are displayed in real time based on the user's input. The auto-complete function automatically fills in existing search keywords or data during user input to provide a more convenient search experience.
To implement search keyword prompts and automatic completion functions, we need the following steps:
<script> $(document).ready(function(){ $("#search").keyup(function(){ var keyword = $(this).val(); $.ajax({ url: "suggest.php", method: "POST", data:{keyword:keyword}, success:function(data){ $("#suggest").html(data); } }); }); }); </script>
In the above code, we use the jQuery library to listen to the keyup event of the search box, and use AJAX to send the keywords entered by the user to the suggest.php file for processing. And display the returned results in the suggest element of the page.
<?php $keyword = $_POST["keyword"]; // 连接数据库 $conn = new mysqli("localhost", "root", "", "数据库名"); if($conn->connect_error){ die("数据库连接失败:" . $conn->connect_error); } // 查询相关的搜索建议 $sql = "SELECT keyword FROM keywords WHERE keyword LIKE '$keyword%'"; $result = $conn->query($sql); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo "<li>" . $row["keyword"] . "</li>"; } } $conn->close(); ?>
In the above code, we first obtain the keywords sent through AJAX. Then connect to the database and query search suggestions that match the keyword prefix. Finally, use the echo statement to return the search suggestions to the front-end page.
<script> $(document).ready(function(){ $(document).on("click", "#suggest li", function(){ var keyword = $(this).text(); $("#search").val(keyword); $("#suggest").html(""); }); }); </script>
In the above code, we use jQuery's on event to listen to the event when the user clicks on the search suggestion and fill the suggested text into the search box.
Through the above steps, we can implement search keyword prompts and automatic completion functions. This can greatly improve the user's search experience and optimize the accuracy of search results.
References:
The above is the detailed content of PHP development: How to implement search keyword prompts and automatic completion functions. For more information, please follow other related articles on the PHP Chinese website!