JSFiddle - React, Tailwind, and code Playground

by Ankur Garg

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="ac" /> <span>choose: Multiple item with similar words</span>

CSS

li white-space: pre-wrap

JavaScript

var validOptions = ["Item 1", "Item        1", "Item     1", "Item 2", "Item   2"];
previousValue = "";

$('#ac').autocomplete({
    autoFocus: true,
    source: validOptions
  })
  .keyup(function() {
    var isValid = false;
    for (i in validOptions) {
      if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
        isValid = true;
      }
    }
    if (!isValid) {
      this.value = previousValue
    } else {
      previousValue = this.value;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li style='white-space: pre-wrap'>")
      .append(item.label)
      .appendTo(ul);
  };