{site_name}

{site_name}

🌜 搜索

AJAX Live Search 是一种技术,它允许用户在输入搜索词时实时显示与

php 𝄐 0
Php ajax,Php ajax 跨域重复执行,phpajaxjson实例,phpajax技术,phpajax接口,phpajax返回json数据
AJAX Live Search 是一种技术,它允许用户在输入搜索词时实时显示与搜索词匹配的结果,而不需要重新加载整个页面。这种技术使用 AJAX 技术(Asynchronous JavaScript and XML)来向服务器发送异步请求,然后将返回的数据动态地更新页面,从而实现实时搜索。

下面是一个简单的 AJAX Live Search 的例子:

HTML 代码:


<input type="text" id="search-box" placeholder="Search...">
<ul id="search-results"></ul>


JavaScript 代码:

javascript
// 给文本框绑定键盘输入事件
document.getElementById("search-box").addEventListener("keyup", function() {
// 获取搜索词
var query = this.value;

// 发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "/search?q=" + query);
xhr.onload = function() {
// 解析返回的 JSON 数据
var results = JSON.parse(xhr.responseText);

// 清空搜索结果列表
var ul = document.getElementById("search-results");
ul.innerHTML = "";

// 添加搜索结果到列表中
results.forEach(function(result) {
var li = document.createElement("li");
li.textContent = result.title;
ul.appendChild(li);
});
};
xhr.send();
});


这段代码监听了文本框的键盘输入事件,获取搜索词,并向服务器发送 AJAX 请求。服务器返回的数据是一个 JSON 数组,每个元素表示一个搜索结果。然后,代码将搜索结果动态添加到页面的搜索结果列表中。用户可以在输入搜索词的同时看到实时的搜索结果。