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

Question

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

但是，我对同一位置可以有不同名称的情况不满意。

例如，假设用户想要查找马略卡岛。他可以写:Mallorca、Majorca、Palma de Mallorca、PMI 或 Palma .

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

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

但是，这可能会非常令人困惑。写入Ma自动完成将显示马略卡，帕尔马德马略卡和马略卡，即使它们是同一个地方。

我希望当输入Ma时，用户只会得到一个建议。同样，无论用户输入 Maj、Mal 或 Pal，他都应该只得到一个关于 Mallorca 的建议词。

理想情况下，一个名为 input 的附加属性用作要搜索的输入关键字将是完美的。然后，拥有一个包含每个属性 value 和 input 的数组就可以解决问题了。不幸的是，我在文档中没有找到这样的东西。

如您所见，我使用数组作为源类型。根据我读到的内容，也许 function 类型允许我做这样的事情，但我不清楚如何做，因为我对 js 不太熟悉，也没有找到任何明确的例子它。

我怎样才能以简单的方式实现这一目标？

Answer 1

经过一些额外的研究和多次尝试，我找到了一种方法。这是 特定于 Django 的，因此任何其他更通用的提案当然都非常受欢迎。

解决方案基于this tutorial ，尽管有一些修改。

---

首先，在模板中导入jQuery和jQueryUI:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

然后，在模板本身中，您需要为输入标记分配一个 id。请注意，这个 id 是 jquery 将如何识别以哪种形式运行自动完成的方式。

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="autocomplete-cities">
</div>

JavaScript代码如下:

<script type="text/javascript">
    $(document).ready(function(){
        var location_input=$('input[id="autocomplete-city"]');
        location_input.autocomplete({
          source: "/api/get_city_names/",
          minLength: 2
        });
      } );

    //   keeps same width as box
      jQuery.ui.autocomplete.prototype._resizeMenu = function () {
          var ul = this.menu.element;
          ul.outerWidth(this.element.outerWidth());
        }
</script>

并且urls.py文件需要进行相应修改:

# urls.py

import yourapp.views

urlpatterns = [
    ...,
    url(r'^api/get_city_names/', yourapp.views.get_city_names),
    ...,
]

最后创建 django View 。函数的名称必须与 urls.py 中编写的名称以及 JavaScript 的 source 中编写的名称相同。

#views.py

import json

def get_city_names(request):

    #what was in the question an array is now a python list of dicts.
    #it can also be in some other file and just imported.
    all_city_names = [
    { good_name: 'Mallorca', input_name: 'Palma de Mallorca' },
    { good_name: 'Mallorca', input_name: 'Mallorca' },
    { good_name: 'Mallorca', input_name: 'Majorca' },
    # etc
    ]

    if request.is_ajax():
        q = request.GET.get('term', '')

        city_names = [c['good_name'] for c in all_city_names if q in c["input_name"]]
        city_names = set(city_names) #removing duplicates

        results = []
        for cn in city_names:
            cn_json = {'value': cn}
            results.append(cn_json)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

自动完成功能应该可以工作。