用python、sqlite3、css、jQuery(ajax) 、html写代码,实现一个基于SQLite数据库的搜索框功能: : 关键要求是:搜索框内要有自动联想提示功能,因此此块代码每行添加注释。 假设我的数据库名称是entable.db;表名为core;表中字段为ID、EN、CON共3个;并假设搜索框输入的关键词变量是keyword、搜索框页面用search.html表示、结果展示页用result.html表示、css页面用style.css表示(或直接写在html内)、自动提示联想功能的js代码用autocomplete.js表示。 请分步按我的要求,自动生成配套且关联的app.py代码、search.html代码、results.html代码和搜索框自动联想提示功能的JS代码。 在搜索框中输入关键词,并点击“Search”按钮或按下Enter键来进行搜索。程序会在数据库表中查找符合条件的数据,如果查找到了符合条件的结果,则在网页上展示出来;否则,提示用户无法查找到符合条件的结果。当在搜索框输入字符时,JavaScript代码会向服务器发送请求,获取数据库中与输入字符匹配的数据,并在搜索框下方显示出来,但自动提示联想的字符串数量限定在10条以内。
时间: 2023-05-29 20:04:52 浏览: 333
app.py代码:
```
from flask import Flask, render_template, request
import sqlite3
app = Flask(__name__)
# 定义数据库名称
db_name = 'entable.db'
# 首页
@app.route('/')
def index():
return render_template('search.html')
# 搜索结果页
@app.route('/result', methods=['GET', 'POST'])
def result():
# 获取关键词
keyword = request.form['keyword']
# 连接数据库
conn = sqlite3.connect(db_name)
c = conn.cursor()
# 执行SQL语句,查找符合条件的数据
c.execute("SELECT * FROM core WHERE EN LIKE '%" + keyword + "%' OR CON LIKE '%" + keyword + "%'")
result = c.fetchall()
# 关闭数据库连接
conn.close()
# 如果查找到了符合条件的结果,则在网页上展示出来;否则,提示用户无法查找到符合条件的结果
if result:
return render_template('result.html', result=result)
else:
return "No result found"
if __name__ == '__main__':
app.run()
```
search.html代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="{{ url_for('static', filename='autocomplete.js') }}"></script>
</head>
<body>
<div class="container">
<h1>Search</h1>
<form action="/result" method="post">
<input type="text" name="keyword" id="keyword" placeholder="Search...">
<button type="submit">Search</button>
</form>
<div id="autocomplete"></div>
</div>
<script>
$(document).ready(function(){
// 当在搜索框输入字符时,JavaScript代码会向服务器发送请求,获取数据库中与输入字符匹配的数据,并在搜索框下方显示出来,但自动提示联想的字符串数量限定在10条以内
$('#keyword').on('input', function(){
var keyword = $(this).val();
$.ajax({
url: '/autocomplete',
type: 'post',
data: {keyword: keyword},
success: function(response){
$('#autocomplete').html(response);
}
});
});
});
</script>
</body>
</html>
```
result.html代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Result</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>Search Result</h1>
<table>
<tr>
<th>ID</th>
<th>EN</th>
<th>CON</th>
</tr>
{% for item in result %}
<tr>
<td>{{ item[0] }}</td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
```
autocomplete.js代码:
```
$(document).ready(function(){
// 当在搜索框输入字符时,JavaScript代码会向服务器发送请求,获取数据库中与输入字符匹配的数据,并在搜索框下方显示出来,但自动提示联想的字符串数量限定在10条以内
$('#keyword').on('input', function(){
var keyword = $(this).val();
$.ajax({
url: '/autocomplete',
type: 'post',
data: {keyword: keyword},
success: function(response){
$('#autocomplete').html(response);
}
});
});
// 点击自动提示联想框中的单词,将其填充到搜索框中
$(document).on('click', '.autocomplete-item', function(){
var word = $(this).text();
$('#keyword').val(word);
$('#autocomplete').html('');
});
});
```
阅读全文