jquery - typeahead.js onselect 项目重定向到新窗口

Question

我正在使用带有 json 响应的远程 url（新 typeahead.js）

我的 javascript ：

$(document).ready(function() { 
$('input.country').typeahead({
valueKey: 'name',
remote : {
url : 'example.in/d.php?query=%QUERY',
filter: function (parsedResponse) {
  var dataset = [];   
for (i = 0; i < parsedResponse.length; i++) {
              dataset.push({
                name: parsedResponse[i].name
              });
            }
if (parsedResponse.length == 0) {
              dataset.push({
                name: "No results" 
              }); }
            return dataset;
        },
},
});;
})

我的 json 响应：

[{"name":"诺基亚 110",url:"example.com/nokia-110"},{"name":"诺基亚 210",url:"example.com/nokia-210"}]

那么如何在所选名称上提供 URL 链接？

Answer 1

事件监听器

$('input.country').on( 'typeahead:selected', function(event, selected_object, dataset) {
   window.location.href = selected_object.url
});

这假定您selected_object有一个名为的属性，该属性url包含一个有效的 URL 以将您的浏览器重定向到。关于设置和获取此属性和值的最佳方法有多种变化，url但您可以从这里找出答案。

Answer 2

感谢托比给出总体思路

在这里完整的编码.....我希望它对每个人都很容易

<script type="text/javascript">
  $(document).ready(function() {
    $('input.q').typeahead({
      valueKey: 'name',
      remote : {
        url : 'http://example.com/chk.php?query=%QUERY',

        filter: function (parsedResponse) {
          var dataset = [];   

          for (i = 0; i < parsedResponse.length; i++) {
            dataset.push({
              name: parsedResponse[i].name,
              link:  parsedResponse[i].link
            });
          }

          if (parsedResponse.length == 0) {
            dataset.push({
              name: "No results" 
            }); 
          }

          return dataset;
        },
      },
    })
    .bind('typeahead:selected', function (obj, datum) {
      window.location.href = datum.link;
    });
  })
</script>

Answer 3

您需要更新 Typeahead.js 使用的模板，并在其中显示 URL。

见：https ://github.com/twitter/typeahead.js/#datum

对于一个与 Typeahead.js 配合良好的模板系统，我建议您查看http://twitter.github.io/hogan.js/

Answer 4

我是这样做的：

        var path = "{{ route('home.autocompleteSearch') }}";
        var typeahead = $('input.typeahead');
        typeahead.typeahead({
            source: function (query, process) {
                return $.get(path, {query: query}, function (data) {
                    return process(data);
                });
            },
            afterSelect: function (data) {
                window.location.replace(data.url);
            }
        });