Использование Jquery Autocomplete, если вы наберете несколько букв (вы можете использовать выпадающее меню «Shawn», «Vinnie», «Lisa»), и вы можете выбрать его. Когда вы это сделаете, оно выдает имя в текстовом поле ниже. Однако, если вы выберете имя и выберите его, и поймите, что это было неправильное имя и вручную удалили его из текстового поля, оно, похоже, нарушит функциональность (т. Е. Если вы попытаетесь снова выбрать имя, вы можете, но это будет НЕ отображается в текстовом поле).Почему вручную удаляется мой автозаполнение JQuery?
Есть ли что-то очевидное, что я делаю неправильно?
Кроме того, обратите внимание, существует ли способ, чтобы только одно имя помещалось в текстовое поле, так как всегда должен быть только один диспетчер?
Вот полный код:
<?php
session_start();
require_once('includes/databaseconfig.php');
//Get employees to put in the availablePlayers array for autocomplete
$sql = "SELECT * FROM users
ORDER BY lname";
$allemployees = mysqli_query($con, $sql);
if (!$allemployees) {
die("Database query failed: " . mysqli_error($con));
} else {
while ($row = mysqli_fetch_assoc($allemployees)) {
$supervisordata .= "{ value: \"" . $row['fname'] . " " . $row['lname'] . " \",
label: \"" . $row['fname'] . " " . $row['lname'] . "\",
icon: \"<img src='" . $row['picture'] . "'>\"},";
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="robots" content="noindex, nofollow">
<title>Reporting Request</title>
<link href="style1.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://use.fontawesome.com/4cb79c3742.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
var availableSupervisors = [
<?php
echo $supervisordata;
?>
];
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#supervisor").autocomplete({
source: availableSupervisors,
html: true,
minLength: 2,
select: function(event, ui) {
log(ui.item ?
"" :
"");
$('#log-supervisor').append(ui.item.value);
ui.item.value=""; //blank out input search field
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<h1> Request Form</h1>
<form id="submitRequest" action="" method="post">
<div class="always heading">
<i class="fa fa-users"></i> <span class="section-heading">Communication</span><br/><br />
</div>
<div class="ui-widget always"> <span class="question">Requester Supervisor:</span>
<span class="toolwrapper"><i class="fa fa-question-circle-o"></i>
<span class="tooltip">Please enter the name of your supervisor.</span>
</span><input name="supervisor" id="supervisor" type="text" value="" class="textfield" placeholder="Type at least 2 letters of employee's name" />
</div>
<div class="ui-widget always">
<textarea name="supervisorlist" id="log-supervisor" class="ui-widget-content" placeholder="Names will appear here, separated by comma"></textarea>
<input type="hidden" name="hidden" value="hidden"/>
</div>
</form>
</div>
</body>
</html>