<input type="text" id="text" autocomplete="on" name="text_name" />  
<input type="text" id="text" 
autocomplete="off" name="text_name"/> 
<input id="tags"/>

/*https://bugs.chromium.org/p/chromium/issues/detail?id=1334
==
http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
==
*/


html,
body {
  height: 100%; 
}
body {
  background: #111 
}

#tags {
  background: #111;
  border: 1px solid #333;
  color: #ccc;  
  display: block;
  font: normal 12px/30px sans-serif;
  height: 30px;
  padding: 0 10px;
}
#tags:focus {
  background: #333;
  border-color: #333;
  color: #ccc;
  outline: none;
}

input {
  background: #111;
  border: 1px solid #333;
  color: #ccc;  
  display: block;
  font: normal 12px/30px sans-serif;
  height: 30px;
  padding: 0 10px;
}

input:focus {
  background: #333;
  border-color: #333;
  color: #ccc;
  outline: none;
}
.ui-autocomplete {
    background: #333;
    color: #ccc;    
    border-radius: 0px;
}
/*
https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
==
if ($.browser.webkit) {
$('input[name="text_name"]').attr('autocomplete', 'on');
}*/
  $( function() {
    var tag_source = [
      "selection one",
      "selection two"
     ];
    $( "#tags" ).autocomplete({
      source: tag_source
    });
  } );

External CSS

  1. http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

External JavaScript

  1. https://code.jquery.com/jquery-1.12.4.js
  2. https://code.jquery.com/ui/1.12.1/jquery-ui.js