Поисковая строка html bootstrap

A responsive Bootstrap Search Box that really searches

There are plenty of search box examples on the Internet, but all of them are actually static components that don’t perform their crucial action — searching. In this simple and short tutorial, I’ll show you how to achieve the desired result and how to create a fully functional search box, that really searches.

Note: If you want to learn more about the basics of Bootstrap Search have a look at our Search Docs.

In this tutorial, I will use Bootstrap 5 which is the newest version of the Bootstrap. The search functionality will be written in plain JavaScript, with no dependencies. I will also use a free UI KIT Material Design for Bootstrap, to apply Material Design look to the project.

Step 1

Go to the installation page and download Material Design for Bootstrap. It’s free, MIT licensed and you can freely use it in any projects — also commercial. Unzip the package and open it in your favorite code editor. I recommend Visual Studio Code together with our extension VSC code snippets for MDB.

Step 2

I am adding a simple grid to provide a proper margin and card inside of the grid. This step is not strictly related to the search box and it’s used only to improve the visual effect of this small project. It’s fully optional and you can skip this step if you care only about search functionality.

 class="container my-5">  class="row d-flex justify-content-center">  class="col-lg-6">  class="card">  class="card-body">       

Step 3

From the Search Docs copy the example of the Search with Icon. This example will provide us a necessary UI, to which we will add functionality in JavaScript.

 class="container my-5">  class="row d-flex justify-content-center">  class="col-lg-6">  class="card">  class="card-body">  class="input-group rounded">  type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon">  class="input-group-text border-0" id="search-addon">  class="fas fa-search">         

Step 4

Set a proper ID to the input and to the label. We will use this ID in our JavaScript to get the Search component and make it actually searches. I am also adding .mb-4 class to the .input-group element to provide some margin-bottom and make a space between the search box and the list of items that we will place below.

  class="container my-5">  class="row d-flex justify-content-center">  class="col-lg-6">  class="card">  class="card-body">  class="input-group rounded mb-4">  type="search" id="search-box" class="form-control rounded" placeholder="Search for cars.." aria-label="Search" aria-describedby="search-box">  class="input-group-text border-0" id="search-box">  class="fas fa-search">         

Step 5

Let’s add a list of items that we will search through. From the List Group Docs copy the basic example. Then place a link inside each of the li elements with a car brand inside.

 class="container my-5">  class="row d-flex justify-content-center">  class="col-lg-6">  class="card">  class="card-body">  class="input-group rounded mb-4">  type="search" id="search-box" class="form-control rounded" placeholder="Search for cars.." aria-label="Search" aria-describedby="search-box">  class="input-group-text border-0" id="search-box">  class="fas fa-search">     class="list-group" id="car-list">  class="list-group-item">  href="#">Tesla   class="list-group-item">  href="#">Honda   class="list-group-item">  href="#">Ford   class="list-group-item">  href="#">Volkswagen   class="list-group-item">  href="#">BMW   class="list-group-item">  href="#">Audi        

Step 6

Our UI is ready and now we can take care of JavaScript. We get the search box through an ID and add a keyup event which will trigger the function every time the user type anything in the search input.

document // Get a search box .getElementById("search-box") // Add keyup event .addEventListener("keyup", function ()  // Search functionality >); 

Step 7

document // Get a search box .getElementById("search-box") // Add keyup event .addEventListener("keyup", function ()  // Search functionality // Decalare a variables let input, filter, ul, li, a, i, txtValue; // Assign values input = document.getElementById("search-box"); filter = input.value.toUpperCase(); ul = document.getElementById("car-list"); li = ul.getElementsByTagName("li"); >); 

Step 8

Add the end we create for Loop to loop through all list items, and hide those who don’t match the search query.

document // Get a search box .getElementById("search-box") // Add keyup event .addEventListener("keyup", function ()  // Search functionality // Decalare a variables let input, filter, ul, li, a, i, txtValue; // Assign values input = document.getElementById("search-box"); filter = input.value.toUpperCase(); ul = document.getElementById("car-list"); li = ul.getElementsByTagName("li"); // Loop through all list items, and hide those who don't match the search query for (i = 0; i  li.length; i++)  a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1)  li[i].style.display = ""; > else  li[i].style.display = "none"; > > >); 

Источник

Search input with an icon Bootstrap

No clue how I can do this, since BS 4 doesn’t support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon? This is my code so far:

But that doesn’t do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I’m not sure if that’s the ‘clean’ and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!

8 Answers 8

Bootstrap 5 Beta — (update 2021)

Bootstrap 4 (original answer)

Why not use an input-group?

And, you can make it appear inside the input using the border utils.

Or, using a input-group-text w/o the gray background so the icon appears inside the input.

Alternately, you can use the grid ( row > col- ) with no gutter spacing:

Or, prepend the icon like this.

also issue with input box radius, check this css in bootstrap 4. .input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) < border-top-right-radius: 0; border-bottom-right-radius: 0; >

I would like to know how have the icon in the case I moved the span from right to left( I give the main div the input-group-prepend class), but I do have a simple box instead of the icon

In Twitter Bootstrap 5 .input-group-append and .input-group-prepend is deprecated. You can now add buttons as direct children of the input groups: getbootstrap.com/docs/5.1/migration/#forms

I made another variant with dropdown menu (perhaps for advanced search etc).. Here is how it looks like:

 
   Toggle Dropdown  
Action Another action Something else here Separated link 
  
 

Note: It appears green in the screenshot because my site main theme is green.

Here is an input box with a search icon on the right.

Here is an input box with a search icon on the left.

Sorry about hijacking another post to do this. Your recent question about using casts with Pivot models in Laravel is absolutely possible (I was about to add an answer but then the question got deleted). Please can you re add the question and I’ll add the answer. Are you using Laravel >=5.5 by the way?

Looing forward to seeing you answer! I un-deleted the original question! stackoverflow.com/questions/51869877/…

Here’s a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.

Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user’s input appears to the right of the icon.

Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.

Here is the needed Bootstrap markup.

. and a couple CSS classes for the things which I couldn’t do with Bootstrap classes:

You may have to fiddle with the values for top, left, and padding-left.

Источник

Bootstrap 5 Search

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Installation

Manual installation (zip package)

To take advantage of our Bootstrap images component and use them in your project, you first need to install the MDB 5 Free package

MDB CLI

NPM

Prerequisites

Installation

Importing JS modules

import * as mdb from 'mdb-ui-kit'; // lib import < Input >from 'mdb-ui-kit'; // module 

Importing CSS file

@import '~mdb-ui-kit/css/mdb.min.css'; 

Importing SCSS modules

You can also import individual SCSS modules. To do it properly, we recommend to copy them from the node_modules/mdb-ui-kit/src/scss location directly to your project and import in the same way as CSS files.

Webpack integration

You can significantly speed up the process of creating a new project based on Webpack using our Starter.

CDN

Installation via CDN is one of the easiest methods of integrating MDB UI KIT with your project. Just copy the latest compiled JS script tag and CSS link tag from cdnjs to the application. Don’t forget to add also Font Awesome and Roboto font if you need it. Here’s an example code:

CSS

-- Font Awesome --> link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> -- Google Fonts --> link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> -- MDB --> link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet" /> 

JS

 MDB --> script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js" >/script> 

Customization

Basic example

HTML

 class="input-group">  class="form-outline">  type="search" id="form1" class="form-control" />  class="form-label" for="form1">Search   type="button" class="btn btn-primary">  class="fas fa-search">   

Search without additional elements

HTML

 class="form-outline">  type="search" id="form1" class="form-control" placeholder="Type query" aria-label="Search" />  

You can see more customization examples on the 📄 Search documentation page

Crucial Resources

Related Content and Styles options & features

Learn Bootstrap 5 in 1.5H

Additional resources

Learn web development with our learning roadmap:
🎓 Start Learning

Join our mailing list & receive exclusive resources for developers
🎁 Get gifts

Join our private FB group for inspiration & community experience
👨‍👩‍👧‍👦 Ask to join

Support creation of open-source packages with a STAR on GitHub

Источник

Bootstrap 5 Search component

The search box is an UI element prepared for creating search engines. Its most important element is search input, but it can also contain icons or buttons. It is also adjusted to be used in various other components such as navbar, dropdown, table, select, sidenav and many more.

Basic example

A basic example with a simple button.

Variations

Search comes with plenty of variations. Choose from the following as needed:

Search with icon

See all the available icons in the Icons Docs .

Search with button

See all the possible input combinations in the Input Group Docs .

Search without additional elements

Here is an example of how you can make a search component without any element attached:

Search event

Here is example how you can make search component with event on it which will fire after clicking on search button.

 const searchButton = document.getElementById('search-button'); const searchInput = document.getElementById('search-input'); searchButton.addEventListener('click', () => < const inputValue = searchInput.value; alert(inputValue); >); 

Autocomplete

By adding extra JS code you can make your search input autocomplete as well.

Learn more about Autocomplete in the Autocomplete Docs

 const basicAutocomplete = document.querySelector('#search-autocomplete'); const data = ['One', 'Two', 'Three', 'Four', 'Five']; const dataFilter = (value) => < return data.filter((item) =>< return item.toLowerCase().startsWith(value.toLowerCase()); >); >; new mdb.Autocomplete(basicAutocomplete, < filter: dataFilter >); 

Focus

You can make your input in search component focusable by pressing ctrl + alt shortcut. You are able to easily change combinations of shortcuts by modifing keys array in JS code. For example to change ControlLeft to e key just swap it to KeyE etc.

Источник