How do I search a combo field as I type the text?

Asked

Viewed 628 times

-1

I have a combo field with over 2,000 records. It’s hard to select what I need.

I am in need of something (Bootstrap?) that as I type a part of the word the combo will position itself in the typing text.

I looked for some examples but very complex. Maybe in bootstrap there is something simpler. Someone knows?

Laravel Usage 5.2

Obg.

laravel-5 bootstrap-3 bootstrap

2 answers

7


Only with Bootstrap you cannot accomplish this task. At this link you can find 30 examples in jQuery that do this job. Look for what best suits your needs. Some of the examples can also be found below:

And finally, a JS+HTML example that I took and tried to simplify. Here you can enter a language like Python, Cobol, Fortran and it will be autocomplete:

  $( 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>
<script src="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>

5

The link posted by @Guilherme-reis is from 2012 and may not solve your problem.

The Typeahead.js is a jQuery plugin made by the guys who made the Bootstrap.

In this article of scotch io. 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 so that models have better functionality search: nicolaslopezj/searchable

The article contains details of model implementation and subject matter deepening.

Browser other questions tagged laravel-5 bootstrap-3 bootstrap

You are not signed in. Login or sign up in order to post.