搜索结果:
-
修车厂1:地址,电话号码,营业时间
-
修车厂2:地址,电话号码,营业时间
-
修车厂3:地址,电话号码,营业时间
CSS 样式
css
body {font-family: Arial, Helvetica, sans-serif;
}h1 {font-size: 1.5em;
}form {margin-top: 1em;
}label {display: block;margin-bottom: 0.5em;
}input[type="text"] {width: 100%;padding: 0.5em;margin-bottom: 0.5em;
}input[type="submit"] {padding: 0.5em 1em;margin-bottom: 0.5em;background-color: 000;color: fff;border: none;
}results {margin-top: 1em;
}results h2 {font-size: 1.2em;
}results ul {list-style-type: none;padding: 0;
}results li {margin-bottom: 0.5em;
}results li a {text-decoration: none;color: 000;
}JavaScript(可选)此 JavaScript 代码将处理表单提交并使用 AJAX 向服务器发送请求以获取搜索结果。
javascript
const form = document.getElementById("form");form.addEventListener("submit", (e) => {e.preventDefault();const address = document.getElementById("address").value;const xhr = new XMLHttpRequest();xhr.open("GET", `/search?address=${address}`, true);xhr.onload = () => {if (xhr.status === 200) {const results = document.getElementById("results");results.innerHTML = xhr.responseText;}};xhr.send();
});服务器端处理(例如 PHP)此 PHP 代码将处理服务器端请求并返回搜索结果。
php
'修车厂1','address' => '地址1','phone' => '电话号码1','hours' => '营业时间1',),array('name' => '修车厂2','address' => '地址2','phone' => '电话号码2','hours' => '营业时间2',),array('name' => '修车厂3','address' => '地址3','phone' => '电话号码3','hours' => '营业时间3',),
);echo '
';
foreach ($results as $result) {echo '
-
' . $result['name'] . '
| ' . $result['address'] . ' | ' . $result['phone'] . ' | ' . $result['hours'] . '
';
}
echo '
';
?>