typeahead.js onselect 项目重定向到新窗口答案

【问题标题】：typeahead.js onselect item redirect to new windowtypeahead.js onselect 项目重定向到新窗口
【发布时间】：2013-10-15 13:13:19
【问题描述】：

我使用远程 url 和 json 响应（新 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 链接？

【问题讨论】：

标签： jquery bootstrap-typeahead typeahead typeahead.js

【解决方案1】：

事件监听器

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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);
            }
        });

【讨论】：