如何在自动完成中建议类似的单词 [英] How to suggest similar words in autocomplete
问题描述
我有一个使用jquery-ui-autocomplete的位置的输入字段.
I have an input field for locations with 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>
但是，当同一位置可以使用不同的名称时，我不满意.
However, I am not happy with the case when the same location can have different names.
例如，假设用户想要寻找Mallorca.他可以写: Mallorca ， Majorca ， Palma de Mallorca ， PMI 或 Palma
For example, let's say that the user wants to look for Mallorca. He could write: Mallorca, Majorca, Palma de Mallorca, PMI or Palma.
我的第一个想法是使用label属性
My first idea was to use the label property
var cityNames = [
{ value: 'Mallorca', label: 'Palma de Mallorca' },
{ value: 'Mallorca', label: 'Mallorca' },
{ value: 'Mallorca', label: 'Majorca' },
// etc
];
但是，这可能非常令人困惑.编写 Ma 的自动完成功能将显示 Mallorca ， Palma de Mallorca 和 Majorca ，即使它们位于同一位置.
However, this can be very confusing. Writing Ma the autocomplete would show Mallorca, Palma de Mallorca and Majorca, even if they are the same place.
我想输入 Ma 时，用户只会得到一个建议.同样，无论用户键入 Maj ， Mal 还是 Pal ，他都应该只得到一个关于Mallorca的建议字.
I would like that when typing Ma the user only gets one suggestion. Similarly, no matter if the user types Maj, Mal or Pal, he should just get only one suggestion term for Mallorca.
理想情况下，一个称为input的附加属性作为要搜索的输入关键字将是完美的.然后，拥有一个属性分别为value和input的数组就可以解决问题.不幸的是，我没有在文档中找到这样的东西.
Ideally, an additional property called input working as the input keyword to be searched would have been perfect. Then, having an array with the properties value and input for each would have done the trick. Unfortunately, I did not find such a thing in the docs.
如您所见，我正在使用array作为源.就我所读的内容而言，也许function类型可以让我做这样的事情，但是我不知道怎么做，因为我对js不太熟悉，也找不到关于它的清晰示例.
As you can see, I am using as source type an array. For what I read, maybe the function 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.
我如何以一种简单的方式实现这一目标?
How could I achieve that in a simple way?
推荐答案
您快到了.您可以使用response函数(在API中查看)从结果中删除备用拼写.最后还要拼写最佳拼写(在这种情况下为"Mallorca").检查一下，我希望注释足以理解逻辑.尝试输入"Ma"或"Maj"，然后选择唯一的选项.在两种情况下，它都会显示马洛卡"
You are almost there. You can use the response function (see in API) to remove the alternate spellings from the results. Also put the best spelling ("Mallorca" in this case) last. Check this out, I hope the comments are enough to get the logic. Try to type "Ma", or "Maj" and select the only option. In both cases it will display "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>
这篇关于如何在自动完成中建议类似的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
