typeahead.js onselect item redirect to new window

问题

I am use remote url with json response ( New typeahead.js)

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

my json response :

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

so how to give URL link on selected name ?

回答1:

You need to update the template that Typeahead.js uses and in it you would display the URL.

See: https://github.com/twitter/typeahead.js/#datum

For a good templating system that works well with Typeahead.js I would recommend you look at http://twitter.github.io/hogan.js/

回答2:

Event Listener

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

This assumes that your selected_object has an attribute called url that contains a valid URL to redirect your browser to. There are variations as to the best way to set and get this url attribute and value but you can figure it out from here.

回答3:

Thanks Toby for giving overall idea

Here Full coding.....I hope its easy for everyone

<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>

回答4:

I did it like this:

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

来源：https://stackoverflow.com/questions/19382181/typeahead-js-onselect-item-redirect-to-new-window

标签

jquery

bootstrap-typeahead

typeahead

typeahead.js