Back

Laravel 5 search/select form with dropdowns and text search


Hello Laravels. I'm building a cityguide which has companies-company types, groups-group types, events-event dates, products-product types and blog posts-post types.

In the home page i need a search/select form which is capable of searching each model-table using select options, each model-option in the first select box for models, has the second select box as dependant to list the type of each single model and last, the text search input in the form searches for any additional keyword that can be useful to find what the user wants.

The fact is that i'm stuck and i don't know how to build that last feature of the website. I found tutorials for dependant select forms and full text search but i cannot find a suitable solution for building the first select box which selects a single model-migration-table.

In conclusion the first select box needs to "listen" to the option value and search one particular main model-companies,events,groups,products or blog posts. The second selectbox needs to be dependant to the first selectbox and show the type of the first mainmodel. Lastly, text input needs to search to the $query that user types.

https://screenshots.firefox.com/AAmKw2wRD9NhfEdT/karvali.local

Can anyone help on this?? this is the last feature before production release and server upload

Harry Ho replied 2 months ago

If I'm not misunderstand your question, what you need is search dropdown list. Myself facing this problem recently and choice to use 'Select2'.

In order to use Select2, you just need to include the following lines of code in the <head> section of your page.


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 

And then, you could use jQuery function to make select list searchable.

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

If this doesn't work, you could use key word 'pulldown search list' or 'dropdown search list' to ask google.

savanihd replied 1 month ago

Here is a step by step full tutorial with example demo: Laravel 5 - Dynamic Autocomplete search using Select2 JS

I hope it can help you...


Sign in to participate in this thread!



We'd like to thank these amazing companies for supporting us