前言
最近是要去Web前端开发的比赛，我一个学网安的，去做Web前端开发，我JS都没学过，然后花了两天时间恶补了JS，勉强写出了小功能，代码可能不好，如果有前端大佬建议欢迎留言ヾ(≧▽≦*)o。
一.实现过程
1.数据库
这里使用的是PHP调用数据库数据来进行的交互，数据库查询如下图👇,是某些城市的名称。
2.PHP代码
PHP代码我是抄的菜鸟教程的代码，然后稍作修改弄的如下图👇。
database.php
<?php
$servername = "localhost";
$username = "root";
$password = "123.com";
$dbname = "search";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
//接口格式json
header("content-type:application/json");
search.php
<?php
use function PHPSTORM_META\type;
Header("Access-Control-Allow-Origin: * ");
// Header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
require_once "database.php";
$sql = "SELECT * FROM `list`";
$result = $conn->query($sql);
//存储一个数组
$arr = [];
if ($result->num_rows > 0) {
// 输出数据
while ($row = $result->fetch_assoc()) {
$title = $row;
// var_dump($title);
array_push($arr, $title);
}
} else {
echo "0 结果";
}
//输出接口数据
// echo $arr;
// var_dump($arr);
$str = json_encode($arr);
echo $str;
//关闭连接
$conn->close();
3.html + js代码
index.html
因为啥也不懂，就写了很多的注释来提醒自己了。
<html>
<head>
<!-- <script src="/DelphiRequest/search/js/jquery.js"></script> -->
<script>
function showResult(str) {
var xmlhttp;
//如果传参的str长度为0也就是没有传参
if (str.length == 0) {
//那么在对应的ID后面添加文本为空
document.getElementById("livesearch").innerHTML = "";
//效果也为空
document.getElementById("livesearch").style.border = "0px";
return;
}
if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp = new XMLHttpRequest();
}
else {// IE6, IE5 浏览器执行
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//onreadystatechange的意思是当readyState改变的时候就会调用
xmlhttp.onreadystatechange = function () {
/*
下面的readyState == 4代表请求完成，并且响应值是200(.status)
0代表没有初始化
1代表服务器连接建立
2代表请求接受
3代表请求处理中
*/
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取数据
let res = xmlhttp.responseText; //XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回文本
res = JSON.parse(res); //把接口返回的数据转换成json格式
var shuzu = []; //定义一个数组变量shuzu //还可以这样var shuzu = new Array();
for (let i = 0; i < res.length; i++) { //循环输出res json数据，获取里面的name
shuzu.push(res[i].name); //然后把name的值放进shuzu这个数组里面
}
//实现前端搜索
var arr = []; //定义一个空数组
for (let j = 0; j < shuzu.length; j++) {
//如果字符串中不包含目标字符会返回-1
if (shuzu[j].indexOf(str) >= 0) { //实现搜索功能
arr.push(shuzu[j]);
}
}
//getElementById应该是找到id为livesearch然后innerHTML的意思是在里面添加文本
document.getElementById("livesearch").innerHTML = arr;
//.style.border应该是找到对应ID添加对应CSS效果
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
}
xmlhttp.open("GET", "search.php", true);
xmlhttp.send();
}
//用jquery实现
// function showResult(str) {
// $.ajax({
// type: "GET",
// url: "livesearch.php",
// datatype: 'json',
// data: { 'q': str },
// success: function (data) {
// document.getElementById("livesearch").innerHTML = data;
// document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
// }
// })
// }
</script>
</head>
<body>
<!-- this.value我猜测是输入的值，onkeyup是松开按键就执行函数，并且把输入的值带入进去 -->
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</body>
</html>4.效果。
如下图👇，到现在我还不知道怎么实现换行，有大神知道可以留言ヾ(≧▽≦*)o。
