为什么手动删除会破坏我的JQuery Autocomplete？

时间：2016-07-20 15:22:16

标签： javascript php jquery autocomplete

使用Jquery Autocomplete，如果您输入几个字母（可以使用“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>&nbsp;&nbsp;<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 个答案:

答案 0 :(得分：1)

您需要更新此内容：

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

到此

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

因为当您执行追加时，您正在设置文本节点和值。当您删除文本区域中的某些内容时，它只是节点，并且值不会更改。因此，jQuery将清空该区域，您将看不到任何内容。

答案 1 :(得分：1)

设置textarea内容的正确方法是设置其值，而不是HTML。在您编辑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>&nbsp;&nbsp;<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>

相关问题
最新问题