Laravel First Character matched Search using Select2

In this tutorial, you will learn about Laravel First Character Search using Select2. For that, we will use Select2.Select2 is a jQuery based replacement for select boxes. It supports searching remote data sets and infinite scrolling of results.

In this tutorial, we will use select2 version 3.5.3.

One important thing that is after 3.5.3 or latest version(like version 4) they are maintaining another site (https://select2.org/) and it’s matching search technique is different than version 3.5.3 (https://select2.github.io/select2/).

Laravel First Character matched Search using Select2

In web.php

In TestController.php

For Database setting

In .env

For database link

https://gitlab.com/Bons/auto-search-in-laravel-view-db-only/blob/master/sample_db.sql

for view

userinfo.blade.php

Now Do Select2 part

for using select2 in our code we have to add js and CSS files

• Add CSS before your head tag end or </head>

You will get this CSS file going this link https://cdnjs.com/libraries/select2/3.5.3  and then select from version dropdown to 3.5.3 and then CSS tab

• Add CSS before your body tag end or </body>

You will get this js file going this link https://cdnjs.com/libraries/select2/3.5.3  and then select from version dropdown to 3.5.3 and then js tab

• Since Select2 is a jQuery based so we have to add jquery file also

You will get this js file going this link https://code.jquery.com/

We include just the files but don’t active or connect select2 with dropdown for that

add following code before </body> tag

here nameid is the id attribute name of select option <select style=”width: 200px” id=”nameid”> Since id attribute that’s why we used # sign in jquery part

$(“#nameid”). Then we want to connect or active Select2 that’s why we use select2 in the dropdown or select tag. $(“#nameid”).select2({ }); 

 

Select2 have many options like placeholder,allowclear etc.for required we will add following code

Here placeholder=used or included temporarily  to hint  specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format)

one important note when you will use placeholder make sure you are including an empty option or the first option tag is empty  <option></option> .Like in our example

allowClear=a close icon(X)  will appear after selecting value so that you can clear the input field

matcher= that’s the main thing that our tutorial main focus that first character search or matched result.matcher is a function.

here the term is the search term and type is string

text is text of the option being matched. and type is string

The indexOf() method returns the position of the first occurrence of a specified value in a string. This method returns -1 if the value to search for never occurs. Note: The indexOf() method is case sensitive.click here to understand what is indexOf

 

So finally our final view code is below

userinfo.blade.php (final one)

 

For Video