个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用动态依赖 Twitter-TypeAhead用户在 html 选择框中选择一个值后，将填充输入文本。我想在用户在输入文本下拉列表中选择一个选项后获取一个值，并使用 php 或 jquery 在 div 中显示该值。实际上，我想在 div 内显示的值来自产品表“图像”列。
为此，我创建了一个名为产品的表，其结构如下所示:
id | productName | categoryFK | image
---------------------------------------------
01 | Nike Tenis | 1 | 001.jpg
02 | Adidas T-shirt | 2 | 002.jpg
03 | H. Shoes | 1 | 003.jpg
--> 表 products 包含一个调用的外键 categoryFK
为了显示上面的值，我有一个索引页面，其中包含一个填充有 php 代码的选择框和一个填充有 TypeAhead plugin 的输入文本。当用户在选择框中选择一个值时:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="container">
<br>
<h1>TWITTER DYNAMIC TYPEAHEAD</h1>
<br>
<div class="row">
<?php
// Include the database config file
include_once 'dbConfig.php';
// Fetch all the category data
$query = "SELECT * FROM categories ORDER BY category ASC";
$result = $db->query($query);
?>
<!-- category dropdown -->
<div class="col-md-4">
<select id="categoryFK" name="categoryFK" class="form-control">
<option value="">select category</option>
<?php
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
echo '<option value="'.$row['categoryID'].'">'.$row['category'].'</option>';
}
}else{
echo '<option value="">Category not available</option>';
}
?>
</select>
</div>
<div class="col-md-4">
<input type="text" name="products" id="products" class="form-control input-lg" autocomplete="off" placeholder="" />
</div>
<div class="col-md-4">
<div> I would like to display image value here after select a value into input text #products dropdownlist </div>
</div>
</div>
</div>
</body>
</html>
下面是向 php 脚本发送请求的 Ajax 脚本 (fetch.php):
<script type="text/javascript">
var products;
$ ( function ()
{
$('#categoryFK').on('change', function(){
var queryID = $(this).val();
$.ajax({
url:"fetch.php",
method:"POST",
data: {
category: queryID
},
dataType:"json",
success:function(data)
{
$("#products").val ('');
products = data;
}
});
});
$('#products').typeahead({
source: function ( query, result )
{
result ( $.map(products, function (item)
{
return item;
}
));
}
});
});
</script>
最后，将响应发送到 Ajax 的 php 脚本 fetch.php:
<?php
include 'dbConfig.php';
if ( isset ( $_POST [ 'category' ] ) ) {
$request = $db->real_escape_string($_POST["category"]);
$query = "
SELECT * FROM products WHERE categoryFK = ".$request."
";
$result = $db->query($query);
$data = array ();
if ( $result->num_rows > 0 )
{
while($row = $result->fetch_assoc ())
{
$data[]=$row["productName"];
}
echo json_encode($data);
}
}
?>
如何改进 TypeAhead 脚本以在从输入文本 #products 下拉列表中选择值后在 div 内显示图像值？
最佳答案
你可以像这样使用 jquery ajax 进行更改
Html 和 jquery 示例
$(document).ready(function() {
$("#categoryFK").change(function() {
var src = $(this).val();
$("#result").html(src ? "<img src='path/to/your/image/" + src + ".jpg'>" : "");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categoryFK" name="categoryFK" required>
<option name="cat-1" value="cat-1">cat-1</option>
<option name="cat-2" value="cat-2">cat-2</option>
</select>
<div id="result"></div>关于javascript - 从输入文本 TypeAhead 插件中选择一个值后，如何在 div 内显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59684332/
25
4
0
在我的 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 来复制搜索字段。它查询使用多个异步数据源，并显示按这些数据源的返回分组的结果。 例如，如
我是一名优秀的程序员,十分优秀！