我有一个使用jquery-ui-autocomplete的位置的输入字段。

<script type="text/javascript">
    $(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());
        }
</script>


但是,当同一位置可以使用不同的名称时,我不满意。

例如,假设用户要寻找马略卡岛。他可以写:马略卡岛,马略卡岛,马洛卡帕尔马,PMI或帕尔马。

我的第一个想法是使用label属性

var cityNames = [
    { value: 'Mallorca', label: 'Palma de Mallorca' },
    { value: 'Mallorca', label: 'Mallorca' },
    { value: 'Mallorca', label: 'Majorca' },
    // etc
    ];


但是,这可能非常令人困惑。向马写自动完成功能将显示马略卡岛,马略卡岛帕尔马和马略卡岛,即使它们在同一地方。

jquery - 如何在自动完成中建议类似的单词-LMLPHP

我想在输入Ma时用户只会得到一个建议。同样,无论用户键入Maj,Mal还是Pal,他都应该只得到Mallorca的一个建议词。

理想情况下,一个称为input的附加属性作为要搜索的输入关键字将是完美的。然后,拥有一个属性分别为valueinput的数组就可以解决问题。不幸的是,我在文档中没有找到这样的东西。

如您所见,我将array用作源类型。就我所读的内容而言,也许function类型可以让我做这样的事情,但是我不知道怎么做,因为我对js不太熟悉,也没有找到任何清晰的例子。

我如何以简单的方式实现?

最佳答案

你快到了您可以使用response函数(see in API)从结果中删除备用拼写。最后还要放上最佳拼写(在这种情况下为“ Mallorca”)。检查一下,我希望注释足以理解逻辑。尝试键入“ Ma”或“ Maj”,然后选择唯一的选项。在两种情况下,它将显示“ Mallorca”



 $( function() {
    var availableTags = [
    { value: 'Mallorca', label: 'Palma de Mallorca' },
    { value: 'Mallorca', label: 'Majorca' },
    { value: 'Mallorca', label: 'Mallorca' },
    { value: 'Madrid', label: 'Madrid' }
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      response: function( event, ui ) {
        var added = [];//Keep here the unique labels that are already in the list
        for(var i=ui.content.length-1;i>=0;i--){//Start a loop, itterate all items backwards
          var cur = ui.content[i].value;//Value of the item
          if($.inArray(cur,added)==-1){//If not already loaded
            added.push(cur);//Put the new item in the list
          }else{
            ui.content.splice(i,1);//If already loaded remove it from the results
          }
        }
      }
    });
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

关于jquery - 如何在自动完成中建议类似的单词,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42224605/

10-12 00:05
查看更多