我在我的項目上使用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 關注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消