Twitter typeahead press enter key go to search page.
In this post we will give you information about Twitter typeahead press enter key go to search page.. Hear we will give you detail about Twitter typeahead press enter key go to search page.And how to use it also give you demo for it if it is necessary.
When i was working with Twitter typeahead auto-complete on my laravel 5 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:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Twitter typeahead press enter key go to search page</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" />
<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>
Hope this code and post will helped you for implement Twitter typeahead press enter key go to search page.. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs