Я использую плагин Twitter TypeAhead в своем проекте, и я хотел бы изменить свой сценарий для правильного заполнения вводимого текста. Я нашел похожие вопросы о, но, к сожалению, я не нашел правильного способа решить эту проблему:
- Динамически заполняемый Twitter Bootstrap Напечатать
- заполнить поле выбора на основе другого поля выбора
- заполнить поле выбора при выборе другого окна выбора
На основе приведенного выше описания и для справки я создал html страница, которая отображает мои сомнения: http://testsitex2019.000webhostapp.com/
Сначала я покажу MySql таблицу, которая вызывает ( products ), где содержатся записи, которые введите текст:
id | categoryFK (Foreing Key) | ProductName | image
--------------------------------------------------------
01 | 1 (Shoes) | Adidas Shoes | img_01
02 | 1 (Shoes) | Nike Shoes | img_02
03 | 1 (Shoes) | Red Tenis | img_03
04 | 2 (Clothes) | Black Jacket | img_04
05 | 2 (Clothes) | Blu T-shirt | img_05
Теперь я покажу код html, который отображает:
- Поле выбора, заполненное кодом php ( # category );
- Входной текст, который заполняется с помощью плагина TypeAhead ( # products );
- И div ( # image * 1041) *), которые отображают значение, когда пользователь выбирает параметр во вводимом тексте ( # продукты ).
<!DOCTYPE html>
<html lang="en">
<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);
?>
<!-- category dropdown -->
<div class="col-md-2">
<label>Categories</label>
<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">
<label>Product name</label>
<input type="text" name="products" id="products" class="form-control input-lg typeahead" autocomplete="off" placeholder="Select category and then type product name here" />
</div>
<div class="col-md-6">
<label>(<i>The image name will be display here after select TypeAhead value</i>)</label>
<div id="image" class="image" name="image" height="15px" style="background-color:#f2f0f0;"></div>
</div>
</div>
</div>
Be Ниже приведены сценарии TypeAhead и Ajax, где сценарий Ajax отправляет запрос в сценарий php, получает ответ и отправляет данные в заполненный текст ввода TypeAhead:
<script>
$(document).ready(function(){
var products;
var names = []; // array
var list = {}; // object
$('#categoryFK').on('change', function(){
var queryID = $(this).val();
$.ajax({
url:"fetch.php",
method:"POST",
data:{category:queryID},
dataType:"json",
success:function(data){
console.log(data);
$.each(data, function(i, optionHtml){
$('#products').append(optionHtml);
});
$(".typeahead").val ('');
$( ".image" ).empty();
products = data;
}
});
$('.typeahead').typeahead({
source: function(query, result)
{
$.each(products, function(idx, item){
if(!~names.indexOf(item.productName)) names.push(item.productName);
list[item.productName] = item.image;
});
return result(names);
},
afterSelect: function (data) {
var tmp = list[data];
$('#image').html(tmp);
},
});
});
});
</script>
И, наконец, сценарий php ( fetch. php), которые получают Ajax запрос и отправляют результаты в JSON:
<?php
require_once '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;
}
header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate");
echo json_encode($data);
exit();
}
}
?>
Сомнение: Когда пользователь выбирает поле выбора категории ( # категория ), текст ввода TypeAhead ( # products ) заполняется записями, связанными с выбранным идентификатором категории.
Когда это происходит в первый раз, вводимый текст заполняется правильно, но когда пользователь выбирает значение категории в поле выбора ( # категория ) без обновления страницы, ввод текста Textahead ( # products ) заполняется всеми записями из таблицы products вместо заполнения только записей, связанных с выбранным идентификатором категории.
На этой странице , которую я создал , вы можете Посмотрите, как работает весь приведенный выше код, но я не смог правильно изменить сценарии для правильного заполнения вводимого текста TypeAhead.