分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 如何在自动完成中建议相似的单词，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个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>

@H_403_4@但是,当同一个位置可以有不同的名称时,我不满意.

@H_403_4@例如,假设用户想要寻找马洛卡.他可以写：马洛卡,马略卡岛,马略卡岛帕尔马,PMI或帕尔马.

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

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

@H_403_4@但是,这可能非常令人困惑.写马自动完成将显示马洛卡,马略卡岛帕尔马和马略卡岛,即使它们是同一个地方.

@H_403_4@

@H_403_4@我想在输入Ma时,用户只能获得一个建议.同样,无论用户输入Maj,Mal还是Pal,他都应该只为马洛卡获得一个建议词.

@H_403_4@理想情况下,一个名为input的附加属性作为要搜索的输入关键字将是完美的.然后,拥有一个具有属性值和每个输入的数组就可以完成.不幸的是,我没有在文档中找到这样的东西.

@H_403_4@如您所见,我使用的是源类型数组.对于我所读到的,也许函数类型允许我做这样的事情,但我不清楚如何,因为我不是很熟悉js并且没有找到任何明确的例子.

@H_403_4@我怎么能以简单的方式实现这一目标？

解决方法

你快到了.您可以使用响应功能( see in API)从结果中删除备用拼写.最后拼写最好的拼写(在这种情况下是“马洛卡”).看看这个,我希望这些评论足以得到逻辑.尝试键入“Ma”或“Maj”并选择唯一选项.在这两种情况下,它将显示“马洛卡”

$( function() {
    var availableTags = [      
    { value: '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>