typeahead.js onselect item redirect to new window

Question

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 ?

Lubra

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

Arabel

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

Wellestablished

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

Lubra

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

Photoemission