need some proper guide displayKey and valueKey

Question

need some proper guide displayKey and valueKey

azrull opened this issue 7 years ago · comments

Guys,
Need some assistance about the displayKey and valueKey.

I got have below JSON data in PHP as follows:
[{"staff_no":"3600511","staff_name":"Mohd Azrull Masnam"},{"staff_no":"3600749","staff_name":"Munirah Mokhtar"},{"staff_no":"2700342","staff_name":"Mohd Azrulhan Mohd Shafei"},{"staff_no":"2700075","staff_name":"Jimat Noh"}]

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-tagsinput.css">
</head>
<body>
<form>
<input type="text" name="sendTo" class="sendTo">
</form>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script><script src="js/bootstrap-tagsinput.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var users = new Bloodhound({
			datumTokenizer: Bloodhound.tokenizers.obj.whitespace('users'),
			queryTokenizer: Bloodhound.tokenizers.whitespace,
			prefetch: { url:'test.php' }
		});

		users.initialize();

		$('.sendTo').tagsinput({
			typeaheadjs: {
				name: 'users',
				displayKey: 'staff_id',
				valueKey: 'staff_no',
				source: users.ttAdapter()
			}
		});
	});
</script>
</body>
</html>