javascript - 使用 Flask、Jquery、Javascript、MySQL 自动完成-6ren

javascript - 使用 Flask、Jquery、Javascript、MySQL 自动完成

转载作者：行者123 更新时间：2023-11-30 21:58:10

25

4

这是我的 html 文件，我在其中尝试使用自动完成功能，我想使用从 MySQL 查询中获取的数据，即 first_name 和 last_name。我正在使用 flask 传递此数据，但我无法将其用于自动完成功能。

数据格式: first_name: [[“Steven”], [“Stephany”], [“Sonia”], [“Sambit”], [“Chowta”]]

<html>
<head>
	<title>Autocomplete</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<style>
		.fixed-height {
			padding: 1px;
			max-height: 200px;
			overflow: auto;
		}
	</style>
</head>


<link rel="stylesheet" href="/static/style.css" type="text/css">


<form action="/login" method="POST">
	<div class="login">
		<div class="login-screen">
			<div class="app-title">
				<h1>Search</h1>
			</div>

			<div class="login-form">
				<div class="control-group">
				<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
				<label class="login-field-icon fui-user" for="login-name"></label>
				</div>

				<div class="control-group">
				<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
				<label class="login-field-icon fui-lock" for="login-pass"></label>
				</div>

                <input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
			    <br>

                <script>

                    var first = {{ first|tojson }}
                    var last = {{ last|tojson }}
                    console.log(first)
                    $(function() {
			            $("#firstname").autocomplete({
				            source: first
			            });
			            $("#lastname").autocomplete({
				            source: last
			            }).autocomplete("widget").addClass("fixed-height");
		            });

                </script>

			</div>
		</div>
	</div>
</form>
</html>

最佳答案

你的数据格式:

first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]

错了。详情见option source .

如果您无法更改服务器上的数组，您始终可以在客户端将其展平:

[].concat.apply([], first)

var first =    [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]];
$(function() {
    $("#firstname").autocomplete({
        source: [].concat.apply([], first)
    });
    $("#lastname").autocomplete({
        source: [].concat.apply([], first)
    }).autocomplete("widget").addClass("fixed-height");
});

.fixed-height {
    padding: 1px;
    max-height: 200px;
    overflow: auto;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>



<form action="/login" method="POST">
    <div class="login">
        <div class="login-screen">
            <div class="app-title">
                <h1>Search</h1>
            </div>
            <div class="login-form">
                <div class="control-group">
                    <input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
                    <label class="login-field-icon fui-user" for="firstname"></label>
                </div>
                <div class="control-group">
                    <input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
                    <label class="login-field-icon fui-lock" for="lastname"></label>
                </div>
                <input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
                <br>
            </div>
        </div>
    </div>
</form>

关于javascript - 使用 Flask、Jquery、Javascript、MySQL 自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44357235/

25

4

0

文章推荐： mysql - FreeTDS UTF-8 插入 mysql

文章推荐：由于数据库移动而导致的 c# 连接字符串更改

文章推荐： c# - 使用 lambda 的任务会出现编译时错误

文章推荐： php - 一个查询中的 Symfony2 ManyToMany

flask - Flask-Potion + Flask-Principal锁定用户资源
我正在遵循Flask-potion教程并尝试保护我的api。我一直试图找出如何在User端点上设置权限，以使一个User无法查看另一个User的记录。这是我的代码： class UserResourc
flask - 如何使用 pytest-flask 将发布数据发送到 flask
项目设置 Python 3.5.3 flask 0.12.2 目录 . ├── Core │ ├── BackgroundProcessManager.py │ ├── FirebaseDat
flask - 使用带有 flask 脚本和应用程序工厂的 flask 迁移
我正在构建 flask 应用程序并决定这次尝试应用程序工厂方法，但是遇到了 flask 迁移的麻烦并且无法找出简单的解决方案。请注意，我想将配置位置作为选项传递给脚本管理.py: manager
flask - 如何在现有 Flask 应用中使用 Flask-APScheduler
我尝试通过以下示例代码来熟悉Flask-APScheduler插件:https://github.com/viniciuschiele/flask-apscheduler/blob/master/ex
flask-jwt - flask jwt和 flask jwt扩展之间有区别吗？
我一周前刚刚了解了 Flask 和 JWT，所以我真的需要一些帮助。有人可以解释一下flask-jwt和flask-jwt-extended之间的区别吗？最佳答案 Flask-JWT 没有那么多功能
flask - flask 中不同类型的用户注册
我是 Flask 的新手，我只是想用它创建一个简单的市场。我的网站上有三种类型的用户 [卖家、买家、管理员]。我认为每种类型的用户都应该有自己的注册和登录，因为他们的角色应该提供不同类型的信息。另一方
flask - Flask:从数据库内容动态填充表单
基本上，我想做一些非常简单的事情：我想创建一个用于删除数据库中条目的表单。模板正在创建一个包含所有条目的html表，没有任何麻烦。我现在的问题是：如何将其转换为每行都有链接的表单。当然，我可以通过
flask - Flask-如何将查询字符串参数转换为路由参数
我对Flask来说非常陌生，其中一个基本要求是我需要SEO友好的URL。我说一条路线 @app.route('/sales/') @app.route(/sales/) def get_sales(
flask - [Flask]-自定义Flask用户登录
一直在为用户管理系统开发Flask-user，但是我看不到自定义登录页面和注册页面的方法。我使用pip安装了flask-user pip install flask-user 任何帮助，将不胜感激最
flask - flask 蓝图不起作用
我有一个奇怪的情况，不知道如何找到问题。我已经创建了一个这样的蓝图 reportjobsmod = Blueprint('jobreports', __name__, url_prefix='/jo
flask - Flask 应用程序中的内存数据
我认为在 Flask 中拥有实例变量的正确方法是添加用户和 session ，但我正在尝试测试一个概念，我还不想经历所有这些。我试图让一个网络应用程序将图像加载到一个变量中，然后可以对其执行不同的图像
flask - flask wtf中如何从SelectField获取选中的数据
select = SelectField("City") form.select.choices = [(places['name'], places['name']) for places in p
flask - 如何登录 flask
这个问题在这里已经有了答案: Provide extra information to Flask's app.logger (2 个回答) 3年前关闭。我正在运行一个 flask 应用程序。我想写
flask - flask 问题和错误的请求
我当时正在编程一个非常不错的api，使用json从游戏服务器到我的网站空间获取一些json数据，但是每次我使用angular发送请求时，我都会得到以下信息:127.0.0.1--[20 / Mar
flask - flask 自定义错误处理的上传功能
我已经开发了一个上传表单，以将特定的.xlsx文件作为上传。要求是要处理非xlsx上载的任何异常(例如zip，exe文件)。我正在使用pyexcel库读取上传内容。我尝试创建以下代码来处理此异常: e
flask - flask 404捕获要求的网址
我使用此功能在网站上捕获404错误: @app.errorhandler(404) def page_not_found(e): logger.warning('User raised an
flask-restful - Flask Restful 和 Flask SocketIO 服务器一起运行
我正在尝试同时使用 Flask Restful 和 Flask SocketIO。我已经制作了一个 Flask Restful 应用程序，但现在我想使用 Flask SocketIO 在客户端和我的服
flask - 在代码或 `flask run` 命令中指定 Flask 重新加载监视列表(extra_files)
我有一些 Flask 应用程序，我通过设置 FLASK_APP 来运行它们。环境变量和调用 flask run .自 FLASK_DEBUG也设置了，每当我更改一些代码时，应用程序都可以方便地重新加载
python - Flask - 不能使用来自其他文件的 Flask 和 Flask-mail 实例
我目前正在使用 Flask 构建一个应用程序。我正在努力访问 Flask 实例“app”以及 Flask-mail 实例“mail”。下面是我的项目的样子: └── my-project ├
flask - Flask-Login 的 `remember_me` 是否覆盖 Flask 的 `permanent` ？
Remember-me是 parameter flask_login.login_user(user, remember=False, duration=None, force=False, fres

首页

博学

6Ren·AI

商城

javascript - 使用 Flask、Jquery、Javascript、MySQL 自动完成