如何从 Jquery 自动完成中的数组中删除字符串答案

【问题标题】：How to remove a string from an array within Jquery autocomplete如何从 Jquery 自动完成中的数组中删除字符串
【发布时间】：2017-06-07 15:52:11
【问题描述】：

我的 cshtml 文件中有以下代码。有两个字段我使用自动完成功能：

<div class="Wrapper">
    @using (Html.BeginForm("GetDetails", "TrainInfo", FormMethod.Post))
    {
        <div id="station_row">
            From <input type="text" placeholder="Departure Station" id="depart" name="DeptStation">
            to <input type="text" placeholder="Arrival Station" id="arrive" name="ArrvStation">
        </div>

        <div id="date_time">
            When: <input type="text" id="datepicker" name="DeptDate">
            At: <input type="text" class="timepicker" name="time">

        </div>

        <div id="go_button">
            <button type="submit" name="Submit">Go</button>
        </div>
    }
</div>

@section scripts
{
    <script type="text/javascript">
        (function ($) {
            $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
        })(jQuery);
    </script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

    <script type="text/javascript">
        (function ($) {
            $('.timepicker')
                .timepicker({
                    timeFormat: 'h:mm p',
                    interval: 15,
                    minTime: '00:00',
                    maxTime: '11:45pm',
                    defaultTime: '00',
                    startTime: '0:00',
                    dynamic: false,
                    dropdown: true,
                    scrollbar: true
                });
        })(jQuery);
    </script>

    <script>
        $(function () {
            var availableTags = [
                @{
                    GetAllStationsForUi stationNames = new GetAllStationsForUi(new DatabaseConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TrainTimes"].ConnectionString));
                    var station = stationNames.GetAllPossibleStations().Select(i => "\"" + i + "\"").Aggregate((s1, s2) => string.Format("{0},{1}", s1, s2));
                    @Html.Raw(station)
                }
            ];
            $("#depart").autocomplete({
                source: availableTags
            });
            $("#arrive").autocomplete({
                source: availableTags
                });
        });
    </script>

}

当我从任一框中选择一个选项时，我希望从另一个选项中删除该选项。有谁知道如何做到这一点？

【问题讨论】：

标签： c# jquery asp.net-mvc razor

【解决方案1】：

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

var options = {
    source: availableTags,
    select: function(event, ui) {
      console.log(ui)
     availableTags = jQuery.grep(availableTags, function(value) {
  return value != ui.item.label;
});
      console.log(availableTags)
      
        $('.autocomplete').autocomplete('option', 'source', availableTags)

    }
}
  

    $('.autocomplete').autocomplete(options);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

  
  
  <div class="ui-widget">
  <label for="tags-a">Tags A: </label>
  <input id="tags-a" class="autocomplete">
</div>
  
  <div class="ui-widget">
  <label for="tags-b">Tags B: </label>
  <input id="tags-b" class="autocomplete">
</div>
  
  
</body>
</html>

如果您想在文本框被清除（即未选择）时重新出现已删除（已选择的项目）的项目，则只需挂钩文本框的 keyup 事件，如果它为空，请将 availableTags 设置为原始。

【讨论】：