Display values in another input text after select into dropdownlist

[michelmir]

Hello!

I'm using TypeAhead.js on my project and i'm trying to get ID value and others values after select the value into input text. Actually i did a dynamic typeAhead that depends on select box value id where input text is populated with values based on select box value.

Based on my code script, how can i improve the ajax script below to display values into another input text after i selected a value on dropdown list? Thanks!

`<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>`

The PHP script (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);
}

}
?>`