- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 PHP 源文件执行预输入功能。
这是我的输入字段:
<input type="text" class="form-control typeahead" id="test-field" placeholder="Contact"/>
我的 PHP 源代码:
<?php
require_once dirname(__FILE__) . ("/../db_connection.php");
global $connection;
$search = $_POST['query'];
$get = "SELECT * FROM contacts WHERE contact_fname LIKE '%{$search}%'";
$query = mysqli_query($connection, $get);
$json = array();
while ($rows = mysqli_fetch_assoc($query)) {
$json[] = $rows;
}
$json = json_encode($json);
print_r($json);
?>
我的 JQuery:
<script src="plugins/typeahead/typeahead.bundle.min.js"></script>
jQuery(document).ready(function() {
// Init Twitter Typeahead.js
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push({
value: str
});
}
});
cb(matches);
};
};
$('.typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: '../includes/functions/json_test.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data) {
//console.log(data);
process(data);
}
});
}
});
});
如果我直接使用以下方式访问 PHP 文件,我就可以显示结果:(localhost/X/XX/json_test.php?query=er) - 仅当我将 $_POST 更改为 $_GET 时(不知道为什么) )。Typeahead 根本不起作用。我缺少任何东西。谢谢。
编辑:这是返回的 json:
[{"contact_id":"6","contact_account_id":"38","contact_fname":"firstname","contact_lname":"lastname","contact_title":"CEO","contact_phone":"(123) 456-5885","contact_email":"user@email.com","contact_fax":"(123) 456-5885","contact_facebook":null,"contact_twitter":null,"contact_linkedin":null,"contact_is_main":"0"}]
最佳答案
您的代码存在一些问题:
您只能通过 $_GET
访问它的原因是因为你正在制作 GET
向服务器请求。
当向服务器发出搜索请求时,实际上最好使用 GET
请求,因为您正在尝试获取数据而不是操作数据。
您直接注入(inject)搜索词 mysqli_query
直接调用会使您面临 SQL 注入(inject)漏洞。
使用 print_r
不会以可读格式向 JavaScript 提供数据。
如果未设置正确的 header ( application/json
),则将数据发送回 JavaScript 将导致结果不一致。
我建议执行以下操作
PHP:require_once dirname(__FILE__) . ("/../db_connection.php");
global $connection;
$search = $_GET['query'];
$query = "SELECT * FROM `contacts` WHERE `contact_fname` LIKE '%?%'";
$results = [];
if ($stmt = mysqli_prepare($connection, $query)) {
mysqli_stmt_bind_param($stmt, "s", $search);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC) {
$results[] = $row;
}
}
header("Content-type: application/json");
exit(json_encode($results));
JavaScript(HTML 内):
<script src="plugins/typeahead/typeahead.bundle.min.js"></script>
<script>
jQuery(document).ready(function() {
// Init Twitter Typeahead.js
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push({
value: str
});
}
});
cb(matches);
};
};
$('.typeahead').typeahead({
source: function (query, process) {
$.getJson('../includes/functions/json_test.php', {
'query': query
}, function(data) {
//console.log(data);
process(data);
});
}
});
});
</script>
我注意到的另一件事是你的 javascript 位于脚本标签之外,但你的脚本标签却是 plugins/typeahead/typeahead.bundle.min.js
文件位于其上方的行上。如果这确实在 JavaScript 文件中,则需要将其放入页面的 HTML 中,并将 JavaScript 包装在 <script>
中。标签。还要确保 JavaScript 和 PHP 文件的路径正确,以便正确加载它们。通常最好为您的 Assets 提供相对于根 URL 的绝对 URL,例如 /full/path/to/plugins/typeahead/typeahead.bundle.min.js
和/full/path/to/includes/functions/json_test.php
令我担心的一件事是,您的db_connection.php
文件位于您的 webroot 中,这意味着人们可以访问并可能下载您的 /includes/db_connection.php
文件并获取所有数据库连接凭据。
如果您需要任何进一步的帮助,请告诉我!
关于php - Twitter typeahead 与 mysql 源代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29833450/
在我的 html 页面中,我尝试添加 Typeahead 以进行自动完成,但我无法解决与 TypeError 和 ReferenceError 相关的问题。 我在 CodePen 上尝试了一个示例,工
我已经使用 npm 安装了 typeahead.js。根据我的阅读,这包括预输入和猎犬。 然后我在我的模块中需要 jquery 之后需要它。 但现在当我打电话 new Bloodhound() Blo
我正在尝试使用Twitter提前输入,但遇到了问题。我不知道如何提前将字符串传递给服务器。是通过GET参数吗?如果是这样,该参数的名称是什么? 最佳答案 通过GET参数最简单,您可以选择所需的任何参数
看起来 CSS 不适用于我的 Typeahead。 我正在尝试重现可滚动下拉菜单,例如 https://twitter.github.io/typeahead.js/examples 这是我的代码:
我正在这样设置 typeahead: $this.typeahead({ prefetch: $this.data('url-prefetch'),
我有一个 Typeahead 实例拉入一个列出机场的远程 JSON 对象,我需要按“位置组”将它们分组到建议中,如下图所示: ...这里是如何格式化 JSON 的示例: { "locations
作为标题,我想问:“是否可以限制预先输入显示的建议?” 例如,我有 3 个数据集,每个数据集有 10000 个结果(来自查询)。主题以字符 t 开头大约有 3000 个结果或可能更多。 如果我输入 t
我想实现的功能是,如果我点击一个 DOM 元素,它会自动填充其中包含指定值的预先输入,它应该为此触发 typeahead:selected。 我发现了很多与之相关的查询,答案是 jQuery#type
首先,请检查:http://ws.luyencong.net/data/search/query.php?do=advanced 您可以将该 JSON 的所有内容粘贴到此处:http://pro.js
我一直在尝试结合几个功能 in typeahead plugin特别是多数据集 + 空 + 默认建议。到目前为止没有运气,希望有人可以帮助 现在,为了使其工作,它是多个数据集之间的选择---或---空
我正在尝试将预输入结果放入页面上的特定 div 中。我获得了 JSON 回调数据,但我不知道如何使用它来填充特定的 div。 process 函数的唯一作用是在搜索字段下方列出结果,无论其长度如何。
正如在 screenshot - 使用 typeahead 时如何禁用自动填充? 谢谢。 附注: 使用的浏览器是 Chrome 版本 47.0.2526.106(64 位) 最佳答案 添加 autoc
正如在 screenshot - 使用 typeahead 时如何禁用自动填充? 谢谢。 附注: 使用的浏览器是 Chrome 版本 47.0.2526.106(64 位) 最佳答案 添加 autoc
我使用的是 0.11.1 版的 Twitter Typeahead。现在我正试图让远程工作正常,但不知何故我认为我的行为很奇怪。 这是使用本地数组的工作代码: var localArray = [{"
我试过在 web 应用程序中应用 twitters typeahead 插件。我使用 typeahead 插件初始化了许多 typeahead 输入字段,这似乎以某种方式起作用。该插件栩栩如生。然而,
所以我使用Materialziecss和第三方库进行标签输入 Materializecss:http://materializecss.com/ Materialize 标签库:http://henr
我想用 Typeahead JS 做一个简单的自动完成但我不能让它工作。我按照手册中的说明进行操作,但我不确定我在这里做错了什么。我无法从 json 文件中获取正确的值。它是一个带有对象的数组,我只想
我有一个 Angular uib-typeahead。这是我创建的 plunkr 的链接。 https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview .
我实际上想发送我选择的主题(一个包含许多变量的 json 对象),而不是存储在 topicsPopulate 中的字符串(主题名称)。Topics 是一个主题数组,一个主题看起来像这样, {
我正在尝试使用带有 react-bootstrap-typeahead 的旧 jQuery typeahead 来复制搜索字段。它查询使用多个异步数据源,并显示按这些数据源的返回分组的结果。 例如,如
我是一名优秀的程序员,十分优秀!