May 14, 2024 | jQuery Bootstrap Javascript
Hello Dev,
It seems like you're encountering an issue with the Twitter typeahead auto-complete feature in your Laravel 5 application. Specifically, you want to redirect to the search results page when the user presses the Enter key after typing in the search input.
To achieve this functionality, you've found a solution using jQuery's "on keypress" event. This event allows you to capture when a key is pressed, and if it's the Enter key, you can trigger the redirection to the search results page.
It's common to face challenges like this in web development, but finding solutions through experimentation and research is part of the process. By utilizing jQuery events effectively, you can enhance the user experience of your application and ensure smooth navigation for your users. If you need further assistance with implementing this solution or have any other questions, feel free to ask!
Read Also: Lazy Loading Images Jquery Example Tutorial Example :1
<!DOCTYPE html>
<html>
<head>
<title>Twitter Typeahead Enter Key Go Search Page Example Tutorial -- ItErrorSolution.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>
<form id="searchForm">
<input type="text" id="searchInput" name="query" placeholder="Search...">
<button type="submit">Search</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#searchInput').on('keypress', function(e) {
if (e.which == 13) { // 13 is the key code for Enter
e.preventDefault(); // Prevent the form from submitting
var query = $(this).val(); // Get the search query
window.location.href = '/search/results?query=' + encodeURIComponent(query); // Redirect to the search results page
}
});
});
</script>
</body>
</html>
Step 2: Handle the Search Query in Laravel
On the server side, in your Laravel controller handling the search results, retrieve the search query from the request and use it to fetch the relevant results.
public function searchResults(Request $request)
{
$query = $request->get('query');
$results = Model::where('name', 'like', '%'. $query. '%')->get(); // Example query
return view('search.results', ['results' => $results]);
}
Step 3: Display the Results
Finally, in your search results view (search/results.blade.php), loop through the $results variable to display the search results.
@foreach($results as $result)
<div>{{ $result->name }}</div>
@endforeach
This setup captures the Enter key press in the search input field, prevents the default form submission, and instead redirects to a search results page with the search query as a parameter. The Laravel controller then handles this query to fetch and display the relevant results.
Read Also: PHP Mysql Crud Integrate Fullcalendar Example Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Typeahead Enter Key Go Search Page Example Tutorial -- ItErrorSolution.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 = ['Gujarat', 'maharastra', 'Goa', 'Kashmir'];
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>
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"