user3304303 user3304303 - 3 months ago 6
jQuery Question

Why is manual deleting breaking my JQuery Autocomplete?

Using Jquery Autocomplete, if you type in a few letters (you can use “Shawn”, “Vinnie”, “Lisa”) names dropdown and you can select one. When you do, it throws the name in the text box below. However, if you choose a name and select it, and realize it was the wrong name and manually delete it from the text box, it seems to break the functionality (i.e. if you try to choose a name again, you can, but it will NOT appear in the text box).

Is there something obvious that I’m doing wrong?

Also, side note, is there a way to only allow ONE name to be put in the text box, since there should always only be one supervisor?

Here is full code:

//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" "">
<html xmlns="">
<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=""></script>
<link href=',400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//">
<script src=""></script>
<script src="//"></script>
$(function() {

var availableSupervisors = [
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 ?
"" :
"" );
ui.item.value=""; //blank out input search field
<div class="wrapper">
<h1> Request Form</h1>
<form id="submitRequest" action="" method="post">
<div class="always heading">
<i class="fa fa-users"></i>&nbsp;&nbsp;<span class="section-heading">Communication</span><br/><br />
<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 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"/>


You will want to update this:


To this

$('#log-supervisor').val($('#log-supervisor').val() + ui.item.value);

Because when you do an append you are setting a text node and the values. When you delete something in the text area it is just the node and the values are not changes. Therefore jQuery will empty the area and you will not see anything.