I have a combo field with more than 2,000 records. It's hard to select what I need.
I'm in need of something (Bootstrap?) that as you type a part of the word the combo will position itself in the text typing.
I looked for some but very complex examples. Maybe in bootstrap something simpler. Does anyone know?
Using Laravel 5.2
Obg
Only with Bootstrap you can not perform this task. In this link you will find 30 examples in jQuery that make this job. Look for the one that best suits your needs. Some of the examples can also be found below:
And finally, an example JS + HTML that I got ready and tried to simplify. Here you can enter a language like Python, Cobol, Fortran and it will be autocompleted:
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete</title>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" class="form-control">
</div>
</body>
</html>The link posted by @ guilherme-reis is 2012 and may not solve your problem.
Typeahead.js is a jQuery plugin made by the guys who made Bootstrap.
In this scotch.io article they explain how to use Laravel and Typeahead.
Summary:
HTML :
<input type="search" name="q" class="form-control" placeholder="Search" autocomplete="off">
Javascript :
jQuery(document).ready(function($) {
// Set the Options for "Bloodhound" suggestion engine
var engine = new Bloodhound({
remote: {
url: '/find?q=%QUERY%',
wildcard: '%QUERY%'
},
datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
queryTokenizer: Bloodhound.tokenizers.whitespace
});
$(".search-input").typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
source: engine.ttAdapter(),
// This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
name: 'usersList',
// the key from the array we want to display (name,id,email,etc...)
templates: {
empty: [
'<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
],
header: [
'<div class="list-group search-results-dropdown">'
],
suggestion: function (data) {
return '<a href="' + data.profile.username + '" class="list-group-item">' + data.name + '- @' + data.profile.username + '</a>'
}
}
});
});
Route :
Route::get('find', 'SearchController@find');
SearchController :
public function find(Request $request)
{
return User::search($request->get('q'))->with('profile')->get();
}
The author uses a trait for models to have better search functionality: nicolaslopezj / searchable
The article contains details of the model's implementation and deepening of the subject.