Question

我使用带有json响应的远程URL（New 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”：“Nokia 110”，url：“example.com/nokia-110”}，{“name”：“Nokia 210”，网址：“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属性和值的最佳方法有所不同，但您可以从此处了解。

Answer 2

感谢Toby提出全面的想法

这里完全编码.....我希望每个人都很容易

<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);
            }
        });

typeahead.js onselect item重定向到新窗口

4 个答案:

事件监听器