CODEWITHSUNDEEP
jquerybootstrap-typeaheadtypeaheadtypeahead.js
Me7888
Me7888

Reputation: 1199

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 ?

Upvotes: 6

Views: 5503

Answers (4)

Evan
Evan

Reputation: 1082

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

Upvotes: 0

Joshua Pinter
Joshua Pinter

Reputation: 47481

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.

Upvotes: 5

Me7888
Me7888

Reputation: 1199

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>

Upvotes: 4

Toby
Toby

Reputation: 8792

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/

Upvotes: 2

Related Questions