Ajax 自动完成 - devbridge答案

【问题标题】：Ajax AutoComplete - devbridgeAjax 自动完成 - devbridge
【发布时间】：2015-11-11 18:46:59
【问题描述】：

我使用支持 AJAX 的 DevBridge jQuery 自动完成插件。

我想在此结果中添加一个链接，供用户访问该页面。

var teams =  [
              { value: 'Chicago Blackhawks', link :'http://aaaaa.com', data: { category: 'NHL' } },
              { value: 'kk qdqsd', link :'http://sdfsdfsd.com', data: { category: 'NHL' } },
              { value: 'Chicago Bulls', link :'http://sfsdfsdfsdf.com',  data: { category: 'NBA' } }
            ]
    $('#autocomplete-ajax').autocomplete({
        lookup: teams,
        groupBy: 'category',
        transformResult: function(response) {
        return {
            suggestions: $.map(response.teams, function(dataItem) {
                return { value: dataItem.valueField, link:dataItem.valueField , data: dataItem.dataField };
            })
        };
       },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected:' + suggestion.value + ', ' + suggestion.data + ' '+ suggestion.link);
        },
       onHint: function (hint) {      // previ
            $('#autocomplete-ajax-x').val(hint);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });

我无法在结果中包含链接。

你可以在这里展示我的测试：https://jsfiddle.net/gpthdsgq/

【问题讨论】：

我尝试用户 onSelect: function(suggestion) { window.location.href =Suggestion.link;，它的工作，但对用户来说很难

标签： jquery autocomplete

【解决方案1】：

这是一个很老的问题，但您是否正在寻找这样的问题：

$(function () {
'use strict';

var teams =  [
          { value: 'Chicago Blackhawks', data: { category: 'NHL', link: 'http://aaaaa.com' } },
          { value: 'kk qdqsd', data: { category: 'NHL', link: 'http://sdfsdfsd.com' } },
          { value: 'Chicago Bulls',  data: { category: 'NBA', link: 'http://sfsdfsdfsdf.com' } }
        ]
$('#autocomplete-ajax').autocomplete({
    lookup: teams,
    groupBy: 'category',
    transformResult: function(response) {
    return {
        suggestions: $.map(response.teams, function(dataItem) {
            return { value: dataItem.data.link, data: dataItem.value };
        })
    };
   },
    onSelect: function(suggestion) {
        $('#selction-ajax').html('You selected: <a href="' + suggestion.data.link + '">' + suggestion.data.category + ' '+ suggestion.value + '</a>');
     },
     onHint: function (hint) {      // previ
        $('#autocomplete-ajax-x').val(hint);
      },
      onInvalidateSelection: function() {
        $('#selction-ajax').html('You selected: none');
      }
   });


});

【讨论】：