title: How to suggest similar words in autocomplete
body: <p>I have an input field for locations with jquery-ui-autocomplete.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          var location_input=$('input[id="location-autocomplete"]');
          var cityNames = [
              { value: 'Mallorca' },
              { value: 'Berlin' },
              { value: 'London' },
              // many other elements
          ];
          location_input.autocomplete({
            source: cityNames,
            minLength: 2
          });
        } );
  
      //   keeps same width as box
        jQuery.ui.autocomplete.prototype._resizeMenu = function () {
            var ul = this.menu.element;
            ul.outerWidth(this.element.outerWidth());
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I am not happy with the case when the same location can have different names.</p>
  
  <p>For example, let's say that the user wants to look for Mallorca. He could write: <em>Mallorca</em>, <em>Majorca</em>, <em>Palma de Mallorca</em>, <em>PMI</em> or <em>Palma</em>.</p>
  
  <p>My first idea was to use the <code>label</code> property</p>
  
  <pre><code>var cityNames = [
      { value: 'Mallorca', label: 'Palma de Mallorca' },
      { value: 'Mallorca', label: 'Mallorca' },
      { value: 'Mallorca', label: 'Majorca' },
      // etc
      ];
  </code></pre>
  
  <p>However, this can be very confusing. Writing <em>Ma</em> the autocomplete would show <em>Mallorca</em>, <em>Palma de Mallorca</em> and <em>Majorca</em>, even if they are the same place.</p>
  
  <p><a href="https://i.stack.imgur.com/1vaOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vaOQ.png" alt="Autocomplete with three different names for the same place"></a></p>
  
  <p>I would like that when typing <em>Ma</em> the user only gets one suggestion. Similarly, no matter if the user types <em>Maj</em>, <em>Mal</em> or <em>Pal</em>, he should just get only one suggestion term for Mallorca.</p>
  
  <p>Ideally, an additional property called <code>input</code> working as the input keyword to be searched would have been perfect. Then, having an array with the properties <code>value</code> and <code>input</code> for each would have done the trick. Unfortunately, I did not find such a thing in the docs.</p>
  
  <p>As you can see, I am using as source type an <code>array</code>. For what I read, maybe the <code>function</code> type would allow me to do something like this, but it is not clear to me how, as I am not very familiar with js and did not find any clear example about it.</p>
  
  <p>How could I achieve that in a simple way?</p>