我在我的项目上使用Twitter TypeAhead插件，我想修改我的脚本以正确填充输入文本。我发现了类似的问题，但不幸的是，我没有得到解决这个问题的正确方法：动态填充 Twitter Bootstrap Typeahead根据另一个选择框填充选择框在选择另一个选择框时填充选择框根据上面的描述和参考，我创建了一个html页面，显示我的疑问：http://testsitex2019.000webhostapp.com/首先，我将显示调用（产品）的MySql表，其中包含填充到输入文本中的记录：id | categoryFK (Foreing Key) | ProductName | image--------------------------------------------------------01 | 1 (Shoes) | Adidas Shoes | img_0102 | 1 (Shoes) | Nike Shoes | img_0203 | 1 (Shoes) | Red Tenis | img_0304 | 2 (Clothes) | Black Jacket | img_0405 | 2 (Clothes) | Blu T-shirt | img_05现在，我将显示显示的html代码：用 php 代码填充的选择框 （#category);使用 TypeAhead 插件填充的输入文本（#products);以及一个 div （#image），当用户在输入文本中选择一个选项时显示一个值（#products）。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"><!-- CSS library --><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><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" style="max-width:1230px;"><h1>DYNAMIC BOOTSTRAP TWITTER TYPEAHEAD</h1><hr><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); ?>
1 回答
慕工程0101907
TA贡献1887条经验 获得超5个赞
经过一些调整，我设法找到了解决方案。我保留了变量“list”，并在Typeahead的afterSelect事件中进行了调整，其中在输入文本#products中选择一个选项后，afterSelect事件将与所选项目相关的值发送到div #image。这个解决方案在这里可以看到有效。
下面，Ajax 和 TypeAhead 脚本进行了调整，现在也可以正常工作。调整是在 Ajax 成功和 TypeAhead afterSelect 事件中进行的：
var products;
var list = {}; // object
$ ( function ()
{
$('#categoryFK').on('change', function(){
var queryID = $(this).val();
$.ajax({
url:"fetch.php",
method:"POST",
data: {
category: queryID
},
dataType:"json",
success:function(data)
{
/* The adjust was made here on Ajax success */
console.log(data);
$("#products").val ('');
products = data;
}
});
});
$('#products').typeahead({
source: function ( query, result )
{
result ( $.map(products, function (item)
{
return item.productName;
}
));
},
/* The adjust was made here on afterSelect event */
afterSelect: function(data) {
$.each(products, function(idx, item){
list[item.productName] = item.image;
});
var img = list[data];
$('#image').html(img);
},
});
});
最后，这就是我发现的解决问题的方法。如果有人在上面的代码中建议进行一些优化，那就太好了。谢谢。
- 1 回答
- 0 关注
- 100 浏览
添加回答
举报
0/150
提交
取消