How to remove a string from an array within Jquery autocomplete

Question

I have the following piece of code within my cshtml file. There are two fields which I am using autocomplete for:

<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>

}

When I select one option from either of the boxes, I want this option to be removed from the other selection. Does anyone have any idea on how this can be done?

pookie · Accepted Answer · 2017-06-07 21:01:25Z

    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>

If you want to have the removed (item selected) item reappear when the textbox is cleared (ie unselected), then just hook into the keyup event of the textbox and if it is empty, set availableTags to the original.

Collectives™ on Stack Overflow

How to remove a string from an array within Jquery autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related