PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: Handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax requests and display suggestions (autocomplete.js). Practical example: Include a script in an HTML page and specify the search-input element identifier.
PHP and Ajax: Building an Autocomplete Suggestion Engine
Introduction
The autocomplete suggestion engine is a useful tool that helps users find suggestions in input fields. It is commonly used in search fields, address fields, and other text input areas. This article will guide you through building an autocomplete suggestion engine using PHP and Ajax.
Server Side Script
First, we need a PHP script to handle the Ajax request and return suggestions. Create a file called autocomplete.php and add the following code:
<?php
// 獲取查詢字符串
$query = $_GET['query'];
// 連接到數(shù)據(jù)庫
$conn = new mysqli("localhost", "my_user", "my_password", "my_db");
// 準備 SQL 查詢
$stmt = $conn->prepare("SELECT suggestion FROM suggestions WHERE suggestion LIKE ?");
// 綁定查詢參數(shù)
$stmt->bind_param("s", "%$query%");
// 執(zhí)行查詢
$stmt->execute();
// 獲取結(jié)果
$result = $stmt->get_result();
// 逐行讀取結(jié)果并將其轉(zhuǎn)換為 JSON
$suggestions = array();
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['suggestion'];
}
$json = json_encode($suggestions);
// 返回 JSON 響應(yīng)
header("Content-Type: application/json");
echo $json;
?>Client script
Next, we need a client Script to send Ajax requests and display suggestions. Create a file called autocomplete.js and add the following code:
// 獲取搜索輸入元素
const searchInput = document.getElementById("search-input");
// 添加事件監(jiān)聽器以在按鍵盤鍵時觸發(fā)
searchInput.addEventListener("keyup", function(event) {
// 獲取查詢字符串
const query = searchInput.value;
// 如果查詢字符串為空，則顯示建議
if (query.length > 0) {
// 創(chuàng)建 Ajax 請求
const xhr = new XMLHttpRequest();
xhr.open("GET", "autocomplete.php?query=" + query, true);
xhr.onload = function() {
// 解析 JSON 響應(yīng)
const suggestions = JSON.parse(xhr.responseText);
// 顯示建議
// ... (由你實現(xiàn))
};
xhr.send();
}
});practical case
In order to use the autocomplete suggestion engine, you can Include the above script file in an HTML page and add an identifier for the search-input element. In the autocomplete.php script, you need to change the database connection parameters to match your database settings.
Run Engine
Upload the autocomplete.php and autocomplete.js files to your server. Visit an HTML page containing the search-input element and start entering a query string. You should see suggestions that match your query.
The above is the detailed content of PHP and Ajax: Building an autocomplete suggestion engine. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to get the current session ID in PHP?
Jul 13, 2025 am 03:02 AM
The method to get the current session ID in PHP is to use the session_id() function, but you must call session_start() to successfully obtain it. 1. Call session_start() to start the session; 2. Use session_id() to read the session ID and output a string similar to abc123def456ghi789; 3. If the return is empty, check whether session_start() is missing, whether the user accesses for the first time, or whether the session is destroyed; 4. The session ID can be used for logging, security verification and cross-request communication, but security needs to be paid attention to. Make sure that the session is correctly enabled and the ID can be obtained successfully.
PHP get substring from a string
Jul 13, 2025 am 02:59 AM
To extract substrings from PHP strings, you can use the substr() function, which is syntax substr(string$string,int$start,?int$length=null), and if the length is not specified, it will be intercepted to the end; when processing multi-byte characters such as Chinese, you should use the mb_substr() function to avoid garbled code; if you need to intercept the string according to a specific separator, you can use exploit() or combine strpos() and substr() to implement it, such as extracting file name extensions or domain names.
How do you perform unit testing for php code?
Jul 13, 2025 am 02:54 AM
UnittestinginPHPinvolvesverifyingindividualcodeunitslikefunctionsormethodstocatchbugsearlyandensurereliablerefactoring.1)SetupPHPUnitviaComposer,createatestdirectory,andconfigureautoloadandphpunit.xml.2)Writetestcasesfollowingthearrange-act-assertpat
How to split a string into an array in PHP
Jul 13, 2025 am 02:59 AM
In PHP, the most common method is to split the string into an array using the exploit() function. This function divides the string into multiple parts through the specified delimiter and returns an array. The syntax is exploit(separator, string, limit), where separator is the separator, string is the original string, and limit is an optional parameter to control the maximum number of segments. For example $str="apple,banana,orange";$arr=explode(",",$str); The result is ["apple","bana
JavaScript Data Types: Primitive vs Reference
Jul 13, 2025 am 02:43 AM
JavaScript data types are divided into primitive types and reference types. Primitive types include string, number, boolean, null, undefined, and symbol. The values are immutable and copies are copied when assigning values, so they do not affect each other; reference types such as objects, arrays and functions store memory addresses, and variables pointing to the same object will affect each other. Typeof and instanceof can be used to determine types, but pay attention to the historical issues of typeofnull. Understanding these two types of differences can help write more stable and reliable code.
Using std::chrono in C
Jul 15, 2025 am 01:30 AM
std::chrono is used in C to process time, including obtaining the current time, measuring execution time, operation time point and duration, and formatting analysis time. 1. Use std::chrono::system_clock::now() to obtain the current time, which can be converted into a readable string, but the system clock may not be monotonous; 2. Use std::chrono::steady_clock to measure the execution time to ensure monotony, and convert it into milliseconds, seconds and other units through duration_cast; 3. Time point (time_point) and duration (duration) can be interoperable, but attention should be paid to unit compatibility and clock epoch (epoch)
How does PHP handle Environment Variables?
Jul 14, 2025 am 03:01 AM
ToaccessenvironmentvariablesinPHP,usegetenv()orthe$_ENVsuperglobal.1.getenv('VAR_NAME')retrievesaspecificvariable.2.$_ENV['VAR_NAME']accessesvariablesifvariables_orderinphp.iniincludes"E".SetvariablesviaCLIwithVAR=valuephpscript.php,inApach
PHP header location not working after include
Jul 13, 2025 am 02:08 AM
When encountering the problem that header('Location:...') does not work, the common reasons and solutions are as follows: 1. There is output in advance, causing the header to fail. The solution is to ensure that there is no output before the jump, including spaces, HTML or echo; 2. There is excess output or UTF-8 BOM characters in the include or require file. The file encoding should be checked and saved as "UTF-8 BOM-free"; 3. It is recommended to use ob_start() to turn on the output buffer before the jump, and cooperate with ob_end_flush() to delay the output; 4. After the jump, be sure to add exit to prevent subsequent code execution; 5. Make sure that the header() function call is before all outputs.
