如何处理Typeahead js库中的同义词？

Question

我刚刚使用typeahead js库创建了一个搜索功能。我的问题是，当我从下拉列表中选择一个项目时，它会在输入字段中返回所有同义词，而不是项目名称：

在我的示例中，如果您尝试键入“水果”并从下拉列表中选择项目，则可以正常运行。但是，如果您尝试键入“ Apple”或“ Orange”，然后从下拉列表中选择“ Fruits”，则它将在输入字段中返回“ Fruits”的所有同义词，例如“ Apple，Orange，Banana”。

当我从列表中选择一个项目时，无论我键入名称本身还是它的同义词，我只想只获得输入字段中项目的名称。我究竟做错了什么？我还上传了 JSFIDDLE

这是我的代码：

var freshfood = [
   {"name": "Fruits", /*"link": "#",*/ "synonyms":"Orange, Apple, Banana" ,"desc":""}
   ];
         
         
 typeof $.typeahead === 'function' && $.typeahead({
   input: ".js-typeahead",
   minLength: 1,
   order: "asc",
   group: true,
   maxItemPerGroup: 3,
   groupOrder: function (node, query, result, resultCount, resultCountPerGroup) {

var scope = this,
sortGroup = [];

for (var i in result) {
 sortGroup.push({
 group: i,
 length: result[i].length
                    });
                     }

sortGroup.sort(
scope.helper.sort(
["length"],
false, // false = desc, the most results on top
  function (a) {
 return a.toString().toUpperCase()
              }
            )
         );

return $.map(sortGroup, function (val, i) {
 return val.group
           });
          },
    hint: false,
           
 template: "{{name}} <span style='float:right; color:#ccc;'> {{desc}} </span>",
 display: ["name", "synonyms"],
           
  //emptyTemplate: "no result for {{query}}",
     source: {
     'FRUITS': { data: freshfood },
             },
    callback: {
   /*  onClickAfter: function (node, a, item, event) {
       event.preventDefault();
       window.open(item.link);
      $('.js-result-container').text('');
}, */
onResult: function (node, query, obj, objCount) {
//console.log(objCount)
var text = "";
   if (query !== "") {
text = objCount + ' elements matching "' + query + '"';
                    }
 $('.js-result-container').text(text);
}
   },
  debug: true
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Full-featured-Autocomplete-Library-For-jQuery-Typeahead-js/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/Full-featured-Autocomplete-Library-For-jQuery-Typeahead-js/jquery.typeahead.js"></script>
<div class="typeahead__container">
<div class="typeahead__field">

<span class="typeahead__query">
<input class="js-typeahead" name="q" type="search" autofocus autocomplete="off">
</span>
            
</div>
</div>