Twitter Typeahead Press Enter Key Go To Search Page Example

17-Apr-2021

.

Admin

Twitter Typeahead Press Enter Key Go To Search Page Example

Now let's see example of press enter on search input box using twitter typehead. When i was working with Twitter typeahead auto-complete on my laravel 8 application, But when i press enter key, it's not redirect on my result page. I want to redirect on my result page that way i can display all records of matching search text.

I did try to solve many way but i can't solve simply. At last i found way using jquery "on keypress" event. You can see bellow code how it is work. So let's see bellow example:

In this example when you press enter on search input box. it will redirect on search page like bellow path:

http://demo.ns/search?q=Ala


Example

<!DOCTYPE html>

<html>

<head>

<title>Twitter typeahead press enter key go to search page - NiceSnippets.com</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.bundle.min.js"></script>

</head>

<body>

<input type="text" class="typeahead" />

<script type="text/javascript">

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California','Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii'];

var states = new Bloodhound({

datumTokenizer: Bloodhound.tokenizers.whitespace,

queryTokenizer: Bloodhound.tokenizers.whitespace,

local: states

});

$('.typeahead').typeahead({

hint: true,

highlight: true,

minLength: 1

},

{

name: 'states',

source: states

}).on('keypress', function(e) {

if (e.which == 13) {

var q = $('input.typeahead.tt-input').val();

window.location.href = "/search?q="+q;

}

});

</script>

</body>

</html>

It will help you....

#Jquery