为什么手动删除会破坏我的JQuery自动完成功能？
[英]Why is manual deleting breaking my JQuery Autocomplete?
问题描述
使用Jquery自动完成功能，如果您输入几个字母（可以使用“ Shawn”，“ Vinnie”，“ Lisa”）名称下拉列表，则可以选择一个。 当您这样做时，它会将名称抛出在下面的文本框中。 但是，如果您选择一个名称并选择它，然后意识到它是错误的名称，然后从文本框中手动将其删除，这似乎会破坏功能（即，如果您再次尝试选择一个名称，则可以，但是可以）不会出现在文本框中）。
我做错了什么吗？
另外，请注意，由于始终应该只有一个主管，因此是否有一种方法只能在文本框中输入一个名称？
这是完整的代码：
<?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>
2 个解决方案
解决方案1
1 已采纳 2016-07-20 16:08:38
您将要更新此：
$('#log-supervisor').append(ui.item.value);
对此
$('#log-supervisor').val($('#log-supervisor').val() + ui.item.value);
因为当您执行追加时，您是在设置文本节点和值。 当您删除文本区域中的某些内容时，它只是节点，并且值不会更改。 因此，jQuery将清空该区域，您将看不到任何东西。
解决方案2
1 2016-07-20 16:14:56
设置文本区域内容的正确方法是设置其值，而不是其HTML。 HTML只是用作初始值，直到您对其进行编辑。 因此，请使用$('#log-supervisor').val()而不是$('#log-supervisor').append() 。
var availableSupervisors = [{ value: "Mustafa Alsalihi ", label: "Mustafa Alsalihi", icon: "<img src='https://lh3.googleusercontent.com/-Yw5kveAfFm4/AAAAAAAAAAI/AAAAAAAAAAA/oUCWS4Gz_sQ/photo.jpg'>" }, { value: "Annamarie Antonucci ", label: "Annamarie Antonucci", icon: "<img src='https://lh3.googleusercontent.com/-gPCKbvx1z5Y/AAAAAAAAAAI/AAAAAAAAAj8/rcU-c5GnWWI/photo.jpg'>" }, { value: "Lisa Anzivino ", label: "Lisa Anzivino", icon: "<img src='https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg'>" }, { value: "Lisa Barger ", label: "Lisa Barger", icon: "<img src='https://lh5.googleusercontent.com/-N6w14X7DIuw/AAAAAAAAAAI/AAAAAAAAAAA/lavHdb2Db9Q/photo.jpg'>" }, { value: "Jane Barger ", label: "Jane Barger", icon: "<img src='https://lh6.googleusercontent.com/-E2YipzmL0WA/AAAAAAAAAAI/AAAAAAAAADo/Kz_NYSaGYyM/photo.jpg'>" }, { value: "Simon Barrell ", label: "Simon Barrell", icon: "<img src='https://lh4.googleusercontent.com/-jkvQnB0249U/AAAAAAAAAAI/AAAAAAAAAA0/hhCIiI-XLS0/photo.jpg'>" }, { value: "David Battino ", label: "David Battino", icon: "<img src='https://lh5.googleusercontent.com/-G0XfnLcjk8g/AAAAAAAAAAI/AAAAAAAAAYI/DZmBTIjjxA4/photo.jpg'>" }, { value: "Danielle Bertini ", label: "Danielle Bertini", icon: "<img src='https://lh6.googleusercontent.com/-C2TiaG4pewU/AAAAAAAAAAI/AAAAAAAAABU/inTAogOkT3c/photo.jpg'>" }, { value: "Riccardo Bocci ", label: "Riccardo Bocci", icon: "<img src='https://lh3.googleusercontent.com/-ZS7iS0BnleI/AAAAAAAAAAI/AAAAAAAAAAA/fbwFVjZyRsI/photo.jpg'>" }, { value: "Kim Bostick ", label: "Kim Bostick", icon: "<img src='https://lh5.googleusercontent.com/-3_10CsSFh9Q/AAAAAAAAAAI/AAAAAAAAAAo/5sih1AiQvgE/photo.jpg'>" }, { value: "Michael Brandsema ", label: "Michael Brandsema", icon: "<img src='https://lh4.googleusercontent.com/-h7Pskz9xEYo/AAAAAAAAAAI/AAAAAAAAAaQ/Ar5CA-SktFI/photo.jpg'>" }]; $(function() { 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').val(function(i, oldvalue) { return oldvalue + " " + ui.item.value; }); ui.item.value = ""; //blank out input search field } }); });
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <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> <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>
为什么我的Delete函数只用Express删除Express中的第一个元素
[英]Why my Delete function deleting only First element in express with jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.