Q:

Best way to avoid auto-complete drop down from appending same value multiple times? 

I have a search form which has some ajax querying the database as the user types and listing similar results in a datalist.  The issue I was having is as a user typed, it would continuously append a match it already found.  To illustrate: 
User types: "d"
Datalist: <option value = "dog">
User types: "do"
Datalist: <option value = "dog"> <option value = "dog">
User types: "dog"
Datalist: <option value = "dog"> <option value = "dog"> <option value = "dog">
I solved the issue by emptying the existing data lists on every key-up event before re-appending the current matches.  It works, except that it causes the results to appear to flash in the data list as you type as it is constantly toggling between having options in the data list, having no options, then having options again.  What is the better way of handling this scenario?  
Current JS:
$(document).ready(function() {
  $(window).on('load', function(){
    var search_input = $("#listing-search-bar")

    if (search_input) {
     search_input.keyup(function(e){
      autocomplete(e);
     });
    };

    function autocomplete(el) {
      var input = el.target;
      var min_chars = 0;
      if (input.value.length > min_chars) {
        $.ajax({
          type: 'GET',
          url: "/listings/search",
          data: {"query" : input.value},
          dataType: "json"
        }).done(function(response) {
          // Delete existing results to prevent same result appending multiple times
          $("#cities").empty();
          response.forEach( function(city) {
            // Append all matching cities to drop down
            $("#cities").append(`<option value="${city}"></option>`);
          });
        });
      };
    };
  });
});

A:

You can simply check if element exist before adding it to the DOM:
if ( ! $('#cities option[value="'+city+'"]').length )
    $("#cities").append(`<option value="${city}"></option>`);

