jquery 自动完成数据库 - Javascript (1)

📌 相关文章

📜 jquery 自动完成数据库 - Javascript (1)

📅 最后修改于: 2023-12-03 15:32:14.163000 🧑 作者: Mango

jQuery自动完成数据库 - Javascript

简介

jQuery自动完成（Autocomplete）提供了一种交互方式，当用户键入内容时，自动完成将显示预测的匹配项，帮助用户快速完成表单。而自动完成通常需要从数据库中检索以显示匹配内容。本文将介绍如何使用jQuery自动完成和Javascript连接数据库，实现自动完成功能。

步骤

1. 创建数据库

在MySQL数据库中创建一个表，并向表中添加一些数据。

CREATE DATABASE autocomplete;
USE autocomplete;
CREATE TABLE countries (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);
INSERT INTO countries (name) VALUES ('China'),('Japan'),('Korea'),('Vietnam'),('Thailand'),('Philippines');

2. 编写HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Autocomplete with Database</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.12.4.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
	  $( function() {
	    $( "#country" ).autocomplete({
	      source: 'search.php'
	    });
	  } );
	</script>
</head>
<body>
	<h1>jQuery Autocomplete with Database</h1>
	<p>Type something in the input field:</p>
	<form>
		<label for="country">Country: </label>
		<input type="text" id="country" name="country">
	</form>
</body>
</html>

3. 编写Javascript代码

创建一个名为search.php的PHP文件。该文件处理自动完成功能，从数据库中检索查询，以在用户键入时显示匹配项。

<?php
$pdo = new PDO('mysql:host=localhost;dbname=autocomplete', 'username', 'password');
$searchTerm = $_GET['term'];
$stmt = $pdo->prepare("SELECT name FROM countries WHERE name LIKE '%" . $searchTerm . "%'");
$stmt->execute();
$data = array();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
   $data[] = $row['name'];
}
echo json_encode($data);
?>

4. 运行程序

使用浏览器打开HTML文件。在输入框中键入内容，将看到自动完成下拉菜单中显示匹配项。

结束语

本文介绍了如何使用jQuery自动完成和Javascript连接数据库，实现自动完成功能。通过该功能，用户可以更快地填写表单，并且程序员可以更容易地实现交互式UI。